From e2f172df2e50b739f6dc4e3ce9ec4b69f81422cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Tue, 29 Apr 2025 15:17:28 +0200 Subject: [PATCH 001/240] [ADD] html_builder: new addon to edit html content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: aans-odoo Co-authored-by: Alessandro Lupo Co-authored-by: Alice Gaudon Co-authored-by: Antoine Guenet Co-authored-by: Augustin (duau) Co-authored-by: Benoit Socias Co-authored-by: chdh-odoo Co-authored-by: Davide Bonetto Co-authored-by: emge-odoo Co-authored-by: fdardenne Co-authored-by: FrancoisGe Co-authored-by: Géry Debongnie Co-authored-by: Jinjiu Liu Co-authored-by: ksbh-odoo Co-authored-by: Louis (loco) Co-authored-by: Mohammed Shekha Co-authored-by: Nicolas Bayet Co-authored-by: panv-odoo Co-authored-by: paru-odoo Co-authored-by: Rahil Ghanchi Co-authored-by: Robin Lejeune (role) Co-authored-by: Rodolpho Lima Co-authored-by: Sanjay Sharma Co-authored-by: Sébastien Blondiau Co-authored-by: Sébastien Geelen Co-authored-by: Serhii Rubanskyi - seru Co-authored-by: Soukéina Bojabza Co-authored-by: Subhadeep Co-authored-by: visp-odoo --- .../account_fleet/tests/test_account_fleet.py | 3 + .../tests/test_fleet_vehicle_log_services.py | 3 + addons/html_builder/__init__.py | 1 + addons/html_builder/__manifest__.py | 85 ++ .../static/image_shapes/brushed/brush_1.svg | 13 + .../static/image_shapes/brushed/brush_2.svg | 13 + .../static/image_shapes/brushed/brush_3.svg | 13 + .../static/image_shapes/brushed/brush_4.svg | 13 + .../composite/composite_cut_circle.svg | 13 + .../composite/composite_double_pill.svg | 13 + .../composite/composite_half_circle.svg | 13 + .../composite/composite_sonar.svg | 13 + .../composite/composite_triple_pill.svg | 13 + .../composition/composition_line_1.svg | 31 + .../composition/composition_line_2.svg | 40 + .../composition/composition_line_3.svg | 38 + .../composition/composition_mixed_1.svg | 49 + .../composition/composition_mixed_2.svg | 63 ++ .../composition/composition_organic_line.svg | 19 + .../composition/composition_oval_line.svg | 20 + .../composition/composition_planet_1.svg | 106 ++ .../composition/composition_planet_2.svg | 106 ++ .../composition/composition_square_1.svg | 61 ++ .../composition/composition_square_2.svg | 50 + .../composition/composition_square_3.svg | 57 + .../composition/composition_square_4.svg | 69 ++ .../composition/composition_square_line.svg | 32 + .../composition/composition_triangle_line.svg | 58 + .../image_shapes/convert-to-percentages.html | 17 + .../image_shapes/convert-to-percentages.js | 175 +++ .../image_shapes/devices/browser_01.svg | 22 + .../image_shapes/devices/browser_02.svg | 59 ++ .../image_shapes/devices/browser_03.svg | 52 + .../devices/galaxy_3d_landscape_01.svg | 178 ++++ .../devices/galaxy_3d_landscape_02.svg | 207 ++++ .../devices/galaxy_3d_portrait_01.svg | 98 ++ .../devices/galaxy_3d_portrait_02.svg | 130 +++ .../devices/galaxy_front_landscape.svg | 118 +++ .../devices/galaxy_front_portrait.svg | 118 +++ .../devices/galaxy_front_portrait_half.svg | 119 +++ .../image_shapes/devices/imac_3d_01.svg | 78 ++ .../image_shapes/devices/imac_3d_02.svg | 78 ++ .../image_shapes/devices/imac_front.svg | 87 ++ .../devices/ipad_3d_landscape_01.svg | 294 ++++++ .../devices/ipad_3d_landscape_02.svg | 278 +++++ .../devices/ipad_3d_portrait_01.svg | 281 +++++ .../devices/ipad_3d_portrait_02.svg | 289 +++++ .../devices/ipad_front_landscape.svg | 58 + .../devices/ipad_front_portrait.svg | 58 + .../devices/iphone_3d_landscape_01.svg | 173 +++ .../devices/iphone_3d_landscape_02.svg | 159 +++ .../devices/iphone_3d_portrait_01.svg | 186 ++++ .../devices/iphone_3d_portrait_02.svg | 171 +++ .../devices/iphone_front_landscape.svg | 63 ++ .../devices/iphone_front_portrait.svg | 64 ++ .../image_shapes/devices/macbook_3d_01.svg | 178 ++++ .../image_shapes/devices/macbook_3d_02.svg | 160 +++ .../image_shapes/devices/macbook_front.svg | 100 ++ .../geometric/geo_cornered_triangle.svg | 12 + .../image_shapes/geometric/geo_diamond.svg | 13 + .../image_shapes/geometric/geo_door.svg | 13 + .../image_shapes/geometric/geo_emerald.svg | 13 + .../static/image_shapes/geometric/geo_gem.svg | 13 + .../image_shapes/geometric/geo_heptagon.svg | 13 + .../image_shapes/geometric/geo_hexagon.svg | 13 + .../image_shapes/geometric/geo_kayak.svg | 13 + .../image_shapes/geometric/geo_pentagon.svg | 13 + .../image_shapes/geometric/geo_shuriken.svg | 13 + .../image_shapes/geometric/geo_slanted.svg | 10 + .../image_shapes/geometric/geo_sonar.svg | 13 + .../image_shapes/geometric/geo_square.svg | 13 + .../image_shapes/geometric/geo_square_1.svg | 21 + .../image_shapes/geometric/geo_square_2.svg | 21 + .../image_shapes/geometric/geo_square_3.svg | 22 + .../image_shapes/geometric/geo_square_4.svg | 21 + .../image_shapes/geometric/geo_square_5.svg | 20 + .../image_shapes/geometric/geo_square_6.svg | 20 + .../image_shapes/geometric/geo_star.svg | 13 + .../image_shapes/geometric/geo_star_16pin.svg | 13 + .../image_shapes/geometric/geo_star_8pin.svg | 13 + .../image_shapes/geometric/geo_tear.svg | 13 + .../image_shapes/geometric/geo_tetris.svg | 13 + .../image_shapes/geometric/geo_triangle.svg | 13 + .../geometric/geo_triangle_corner.svg | 11 + .../geometric_round/geo_round_blob_hard.svg | 23 + .../geometric_round/geo_round_blob_medium.svg | 23 + .../geometric_round/geo_round_blob_soft.svg | 21 + .../geometric_round/geo_round_bread.svg | 13 + .../geometric_round/geo_round_circle.svg | 12 + .../geometric_round/geo_round_clover.svg | 13 + .../geometric_round/geo_round_cornered.svg | 13 + .../geometric_round/geo_round_diamond.svg | 13 + .../geometric_round/geo_round_door.svg | 13 + .../geometric_round/geo_round_emerald.svg | 13 + .../geometric_round/geo_round_gem.svg | 13 + .../geometric_round/geo_round_heptagon.svg | 13 + .../geometric_round/geo_round_hexagon.svg | 13 + .../geometric_round/geo_round_lemon.svg | 13 + .../geometric_round/geo_round_pentagon.svg | 13 + .../geometric_round/geo_round_pill.svg | 13 + .../geometric_round/geo_round_shuriken.svg | 13 + .../geometric_round/geo_round_sonar.svg | 13 + .../geometric_round/geo_round_square.svg | 13 + .../geometric_round/geo_round_square_1.svg | 21 + .../geometric_round/geo_round_square_2.svg | 20 + .../geometric_round/geo_round_star.svg | 13 + .../geometric_round/geo_round_star_16pin.svg | 13 + .../geometric_round/geo_round_star_7pin.svg | 13 + .../geometric_round/geo_round_star_8pin.svg | 13 + .../geometric_round/geo_round_tear.svg | 13 + .../geometric_round/geo_round_triangle.svg | 13 + .../static/image_shapes/panel/panel_duo.svg | 13 + .../static/image_shapes/panel/panel_duo_r.svg | 13 + .../image_shapes/panel/panel_duo_step.svg | 13 + .../panel/panel_duo_step_pill.svg | 13 + .../image_shapes/panel/panel_trio_in_r.svg | 13 + .../image_shapes/panel/panel_trio_out_r.svg | 13 + .../image_shapes/panel/panel_window.svg | 13 + .../image_shapes/pattern/pattern_circuit.svg | 122 +++ .../pattern/pattern_labyrinth.svg | 86 ++ .../pattern/pattern_line_star.svg | 45 + .../image_shapes/pattern/pattern_line_sun.svg | 69 ++ .../pattern/pattern_organic_caps.svg | 168 +++ .../pattern/pattern_organic_cross.svg | 87 ++ .../pattern/pattern_organic_dot.svg | 662 ++++++++++++ .../pattern/pattern_oval_zebra.svg | 53 + .../image_shapes/pattern/pattern_point.svg | 38 + .../image_shapes/pattern/pattern_wave_1.svg | 31 + .../image_shapes/pattern/pattern_wave_2.svg | 42 + .../image_shapes/pattern/pattern_wave_3.svg | 65 ++ .../image_shapes/pattern/pattern_wave_4.svg | 42 + .../image_shapes/solid/solid_blob_1.svg | 26 + .../image_shapes/solid/solid_blob_2.svg | 18 + .../image_shapes/solid/solid_blob_3.svg | 20 + .../image_shapes/solid/solid_blob_4.svg | 19 + .../image_shapes/solid/solid_blob_5.svg | 37 + .../solid/solid_blob_shadow_1.svg | 37 + .../solid/solid_blob_shadow_2.svg | 59 ++ .../image_shapes/solid/solid_square_1.svg | 20 + .../image_shapes/solid/solid_square_2.svg | 20 + .../image_shapes/solid/solid_square_3.svg | 37 + .../image_shapes/special/special_filter.svg | 35 + .../image_shapes/special/special_flag.svg | 21 + .../image_shapes/special/special_layered.svg | 40 + .../image_shapes/special/special_organic.svg | 20 + .../image_shapes/special/special_rain.svg | 100 ++ .../image_shapes/special/special_snow.svg | 316 ++++++ .../image_shapes/special/special_speed.svg | 263 +++++ .../static/img/options/bg_shape.svg | 11 + .../static/img/options/bring-backward.svg | 6 + .../static/img/options/bring-forward.svg | 6 + .../static/img/options/desktop_invisible.svg | 5 + .../static/img/options/mobile_invisible.svg | 7 + .../static/img/options/pos_left.svg | 11 + .../static/img/options/pos_right.svg | 11 + .../static/img/options/shadow_in.svg | 11 + .../static/img/options/shadow_out.svg | 11 + .../static/img/options/size_large.svg | 10 + .../static/img/options/size_medium.svg | 10 + .../static/img/options/size_small.svg | 10 + addons/html_builder/static/img/phone.png | Bin 0 -> 20595 bytes .../static/img/snippet_disabled.svg | 7 + .../static/src/bootstrap_overriden.scss | 96 ++ addons/html_builder/static/src/builder.js | 301 ++++++ addons/html_builder/static/src/builder.scss | 221 ++++ .../static/src/builder.variables.scss | 684 ++++++++++++ addons/html_builder/static/src/builder.xml | 47 + .../static/src/core/anchor/anchor_dialog.js | 38 + .../static/src/core/anchor/anchor_dialog.xml | 28 + .../static/src/core/anchor/anchor_plugin.js | 131 +++ .../static/src/core/builder_actions_plugin.js | 42 + .../src/core/builder_component_plugin.js | 67 ++ .../static/src/core/builder_options_plugin.js | 292 ++++++ .../core/builder_overlay/builder_overlay.js | 635 +++++++++++ .../core/builder_overlay/builder_overlay.scss | 252 +++++ .../core/builder_overlay/builder_overlay.xml | 50 + .../builder_overlay/builder_overlay_plugin.js | 165 +++ .../core/building_blocks/basic_many2many.js | 25 + .../core/building_blocks/basic_many2many.xml | 28 + .../core/building_blocks/basic_many2one.js | 45 + .../core/building_blocks/basic_many2one.xml | 18 + .../core/building_blocks/builder_button.js | 61 ++ .../core/building_blocks/builder_button.xml | 28 + .../building_blocks/builder_button_group.js | 23 + .../building_blocks/builder_button_group.xml | 12 + .../core/building_blocks/builder_checkbox.js | 37 + .../core/building_blocks/builder_checkbox.xml | 20 + .../building_blocks/builder_colorpicker.js | 130 +++ .../building_blocks/builder_colorpicker.xml | 10 + .../core/building_blocks/builder_component.js | 18 + .../core/building_blocks/builder_context.js | 22 + .../building_blocks/builder_datetimepicker.js | 114 ++ .../builder_datetimepicker.xml | 18 + .../core/building_blocks/builder_many2many.js | 90 ++ .../building_blocks/builder_many2many.xml | 17 + .../core/building_blocks/builder_many2one.js | 100 ++ .../core/building_blocks/builder_many2one.xml | 20 + .../building_blocks/builder_number_input.js | 173 +++ .../building_blocks/builder_number_input.xml | 19 + .../src/core/building_blocks/builder_range.js | 95 ++ .../core/building_blocks/builder_range.scss | 17 + .../core/building_blocks/builder_range.xml | 29 + .../src/core/building_blocks/builder_row.js | 57 + .../src/core/building_blocks/builder_row.scss | 35 + .../src/core/building_blocks/builder_row.xml | 34 + .../core/building_blocks/builder_select.js | 72 ++ .../core/building_blocks/builder_select.scss | 8 + .../core/building_blocks/builder_select.xml | 23 + .../building_blocks/builder_select_item.js | 73 ++ .../building_blocks/builder_select_item.xml | 31 + .../building_blocks/builder_text_input.js | 37 + .../building_blocks/builder_text_input.xml | 15 + .../builder_text_input_base.js | 50 + .../builder_text_input_base.xml | 34 + .../core/building_blocks/builder_urlpicker.js | 72 ++ .../building_blocks/builder_urlpicker.xml | 20 + .../core/building_blocks/model_many2many.js | 100 ++ .../core/building_blocks/model_many2many.xml | 18 + .../src/core/building_blocks/select_many2x.js | 111 ++ .../core/building_blocks/select_many2x.xml | 36 + .../static/src/core/cached_model_plugin.js | 70 ++ .../static/src/core/cached_model_utils.js | 47 + .../static/src/core/clone_plugin.js | 107 ++ .../static/src/core/color_style_plugin.js | 42 + .../src/core/composite_action_plugin.js | 192 ++++ .../src/core/core_builder_action_plugin.js | 322 ++++++ .../static/src/core/core_plugins.js | 55 + .../static/src/core/customize_tab_plugin.js | 35 + .../static/src/core/dependency_manager.js | 48 + .../src/core/disable_snippets_plugin.js | 135 +++ .../static/src/core/drag_and_drop_plugin.js | 44 + .../src/core/drop_zone_plugin.inside.scss | 62 ++ .../static/src/core/drop_zone_plugin.js | 362 +++++++ .../src/core/dropzone_selector_plugin.js | 69 ++ .../static/src/core/editor.inside.scss | 108 ++ .../core/grid_layout/grid_layout.inside.scss | 78 ++ .../src/core/grid_layout/grid_layout.xml | 19 + .../core/grid_layout/grid_layout_plugin.js | 118 +++ addons/html_builder/static/src/core/img.js | 24 + .../static/src/core/media_website_plugin.js | 52 + .../static/src/core/move_plugin.js | 224 ++++ .../static/src/core/operation.inside.scss | 17 + .../html_builder/static/src/core/operation.js | 135 +++ .../static/src/core/operation_plugin.js | 36 + .../core/overlay_buttons/overlay_buttons.js | 12 + .../core/overlay_buttons/overlay_buttons.scss | 30 + .../core/overlay_buttons/overlay_buttons.xml | 17 + .../overlay_buttons/overlay_buttons_plugin.js | 164 +++ .../static/src/core/remove_plugin.js | 201 ++++ .../static/src/core/replace_plugin.js | 57 + .../static/src/core/save_plugin.js | 177 ++++ .../static/src/core/save_snippet_plugin.js | 54 + .../static/src/core/setup_editor_plugin.js | 92 ++ addons/html_builder/static/src/core/utils.js | 925 ++++++++++++++++ .../src/core/utils/update_on_img_changed.js | 69 ++ .../static/src/core/version_control_plugin.js | 42 + .../static/src/core/visibility_plugin.js | 145 +++ .../static/src/interactions/carousel.edit.js | 85 ++ .../src/interactions/google_map.edit.js | 85 ++ .../src/interactions/image_gallery.edit.js | 22 + .../src/interactions/image_gallery.edit.xml | 13 + .../src/interactions/social_media.edit.js | 14 + .../src/interactions/social_media.edit.xml | 10 + .../static/src/plugins/alert_option.xml | 19 + .../static/src/plugins/alert_option_plugin.js | 46 + .../background_option/background_hook.js | 3 + .../background_option/background_image.xml | 15 + .../background_image_option.js | 37 + .../background_image_option_plugin.js | 184 ++++ .../background_option/background_option.js | 29 + .../background_option/background_option.xml | 54 + .../background_option_plugin.js | 25 + .../background_position_option.js | 6 + .../background_position_option.xml | 24 + .../background_position_option_plugin.js | 113 ++ .../background_position_overlay.js | 183 ++++ .../background_position_overlay.scss | 35 + .../background_position_overlay.xml | 21 + .../background_shape_option.js | 55 + .../background_shape_option.xml | 41 + .../background_shape_option_plugin.js | 419 ++++++++ .../background_shapes_definition.js | 169 +++ .../src/plugins/block_alignment_option.xml | 14 + .../plugins/block_alignment_option_plugin.js | 18 + .../src/plugins/border_configurator_option.js | 38 + .../plugins/border_configurator_option.xml | 21 + .../carousel_bottom_controllers_option.xml | 26 + .../src/plugins/carousel_cards_option.xml | 47 + .../plugins/carousel_item_header_buttons.js | 39 + .../static/src/plugins/carousel_option.xml | 85 ++ .../src/plugins/carousel_option_plugin.js | 353 +++++++ .../plugins/content_width_option.inside.scss | 4 + .../src/plugins/content_width_option.xml | 14 + .../plugins/content_width_option_plugin.js | 43 + .../src/plugins/countdown_option.inside.scss | 12 + .../static/src/plugins/countdown_option.xml | 112 ++ .../src/plugins/countdown_option_plugin.js | 123 +++ .../static/src/plugins/dynamic_svg_option.js | 23 + .../static/src/plugins/dynamic_svg_option.xml | 12 + .../src/plugins/dynamic_svg_option_plugin.js | 53 + .../src/plugins/font_awesome_option.xml | 27 + .../src/plugins/font_awesome_option_plugin.js | 32 + .../src/plugins/image/image_grid_option.js | 29 + .../src/plugins/image/image_grid_option.xml | 13 + .../plugins/image/image_grid_option_plugin.js | 44 + .../static/src/plugins/image/image_helpers.js | 6 + .../plugins/image/image_optimize_plugin.js | 88 ++ .../src/plugins/image/image_shape_option.js | 51 + .../src/plugins/image/image_shape_option.xml | 45 + .../image/image_shape_option_plugin.js | 443 ++++++++ .../plugins/image/image_shapes_definition.js | 692 ++++++++++++ .../src/plugins/image/image_tool_option.js | 74 ++ .../src/plugins/image/image_tool_option.xml | 145 +++ .../plugins/image/image_tool_option_plugin.js | 280 +++++ .../src/plugins/image/replace_media_option.js | 47 + .../plugins/image/replace_media_option.xml | 29 + .../layout_option/add_element_option.js | 12 + .../layout_option/add_element_option.xml | 17 + .../add_element_option_plugin.js | 143 +++ .../layout_option/grid_column_option.js | 13 + .../layout_option/grid_column_option.xml | 11 + .../grid_column_option_plugin.js | 45 + .../plugins/layout_option/layout_option.js | 31 + .../plugins/layout_option/layout_option.xml | 29 + .../layout_option/layout_option_plugin.js | 177 ++++ .../layout_option/select_number_column.js | 20 + .../layout_option/select_number_column.xml | 16 + .../plugins/layout_option/spacing_option.js | 12 + .../plugins/layout_option/spacing_option.xml | 11 + .../layout_option/spacing_option_plugin.js | 76 ++ .../static/src/plugins/rating_option.xml | 44 + .../src/plugins/rating_option_plugin.js | 157 +++ .../src/plugins/section_background_option.xml | 10 + .../static/src/plugins/separator_option.xml | 23 + .../src/plugins/separator_option_plugin.js | 21 + .../static/src/plugins/shadow_option.js | 13 + .../static/src/plugins/shadow_option.xml | 32 + .../src/plugins/shadow_option_plugin.js | 103 ++ .../src/plugins/shape/shape_selector.js | 28 + .../src/plugins/shape/shape_selector.xml | 51 + .../static/src/plugins/size_option.xml | 14 + .../static/src/plugins/size_option_plugin.js | 16 + .../src/plugins/snippets_powerbox_plugin.js | 138 +++ .../src/plugins/text_alignment_option.xml | 14 + .../plugins/text_alignment_option_plugin.js | 18 + .../src/plugins/timeline_images_option.xml | 18 + .../plugins/timeline_images_option_plugin.js | 30 + .../html_builder/static/src/plugins/utils.js | 24 + .../src/plugins/vertical_alignment_option.js | 12 + .../src/plugins/vertical_alignment_option.xml | 18 + .../vertical_alignment_option_plugin.js | 46 + .../src/plugins/vertical_justify_option.xml | 18 + .../plugins/vertical_justify_option_plugin.js | 20 + .../static/src/plugins/width_option.xml | 15 + .../static/src/plugins/width_option_plugin.js | 17 + .../static/src/sidebar/block_tab.js | 384 +++++++ .../static/src/sidebar/block_tab.scss | 170 +++ .../static/src/sidebar/block_tab.xml | 50 + .../src/sidebar/custom_inner_snippet.js | 32 + .../src/sidebar/custom_inner_snippet.xml | 41 + .../static/src/sidebar/customize_component.js | 17 + .../src/sidebar/customize_component.xml | 8 + .../static/src/sidebar/customize_tab.js | 36 + .../static/src/sidebar/customize_tab.xml | 36 + .../sidebar/invisible_elements.inside.scss | 37 + .../src/sidebar/invisible_elements_panel.js | 107 ++ .../src/sidebar/invisible_elements_panel.xml | 32 + .../static/src/sidebar/option_container.js | 142 +++ .../static/src/sidebar/option_container.scss | 65 ++ .../static/src/sidebar/option_container.xml | 72 ++ .../static/src/sidebar/snippet.js | 25 + .../static/src/sidebar/snippet.xml | 23 + .../static/src/snippets/add_snippet_dialog.js | 82 ++ .../src/snippets/add_snippet_dialog.scss | 40 + .../src/snippets/add_snippet_dialog.xml | 41 + .../src/snippets/input_confirmation_dialog.js | 23 + .../snippets/input_confirmation_dialog.xml | 20 + .../static/src/snippets/snippet_service.js | 442 ++++++++ .../static/src/snippets/snippet_viewer.js | 102 ++ .../static/src/snippets/snippet_viewer.scss | 169 +++ .../static/src/snippets/snippet_viewer.xml | 30 + .../static/src/translate.inside.scss | 11 + .../static/src/utils/column_layout_utils.js | 118 +++ .../static/src/utils/grid_layout_utils.js | 387 +++++++ .../static/src/utils/option_sequence.js | 117 +++ .../static/src/utils/scrolling.js | 166 +++ .../static/src/utils/sync_cache.js | 20 + addons/html_builder/static/src/utils/utils.js | 151 +++ .../static/src/utils/utils_css.js | 595 +++++++++++ .../author_avatar_many2one_plugin.js | 32 + .../blog_cover_properties_option.js | 15 + .../blog_cover_properties_option.xml | 25 + .../src/website_blog/blog_page_option.xml | 53 + .../website_blog/blog_page_option_plugin.js | 20 + .../website_blog/blog_post_page_option.xml | 54 + .../blog_post_page_option_plugin.js | 20 + .../src/website_blog/blog_post_tags_option.js | 11 + .../website_blog/blog_post_tags_option.xml | 14 + .../blog_post_tags_option_plugin.js | 21 + .../website_blog/blog_searchbar_option.xml | 12 + .../blog_searchbar_option_plugin.js | 36 + .../dynamic_snippet_blog_posts_option.js | 45 + .../dynamic_snippet_blog_posts_option.xml | 43 + ...ynamic_snippet_blog_posts_option_plugin.js | 53 + .../builder_fontfamilypicker.js | 80 ++ .../builder_fontfamilypicker.xml | 37 + .../src/website_builder/option_sequence.js | 67 ++ .../plugins/customize_website_plugin.js | 657 ++++++++++++ .../plugins/edit_interaction_plugin.js | 70 ++ .../plugins/font/add_font_dialog.js | 347 ++++++ .../plugins/font/add_font_dialog.xml | 106 ++ .../plugins/font/font_plugin.js | 197 ++++ .../plugins/form/form_action_fields_option.js | 26 + .../plugins/form/form_field_option.js | 113 ++ .../plugins/form/form_field_option_redraw.js | 19 + .../form/form_model_required_field_alert.js | 29 + .../plugins/form/form_option.inside.scss | 26 + .../plugins/form/form_option.js | 69 ++ .../plugins/form/form_option.xml | 363 +++++++ .../form/form_option_add_field_button.js | 16 + .../plugins/form/form_option_plugin.js | 992 ++++++++++++++++++ .../src/website_builder/plugins/form/utils.js | 520 +++++++++ .../plugins/options/accordion_option.xml | 71 ++ .../options/accordion_option_plugin.js | 132 +++ .../plugins/options/animate_option.js | 101 ++ .../plugins/options/animate_option.xml | 82 ++ .../plugins/options/animate_option_plugin.js | 279 +++++ .../plugins/options/background_option.js | 28 + .../plugins/options/background_option.xml | 36 + .../options/background_option_plugin.js | 105 ++ .../options/background_video_option.xml | 10 + .../plugins/options/badge_option.xml | 19 + .../plugins/options/badge_option_plugin.js | 17 + .../plugins/options/blockquote_option.xml | 34 + .../options/blockquote_option_plugin.js | 31 + .../plugins/options/border_option.xml | 9 + .../plugins/options/border_option_plugin.js | 19 + .../plugins/options/button_option_plugin.js | 124 +++ .../options/card_image_alignment_option.js | 50 + .../options/card_image_alignment_option.xml | 16 + .../plugins/options/card_image_option.js | 15 + .../plugins/options/card_image_option.xml | 99 ++ .../options/card_image_option_plugin.js | 89 ++ .../plugins/options/card_option.js | 27 + .../plugins/options/card_option.xml | 19 + .../plugins/options/card_option_plugin.js | 54 + .../plugins/options/card_width_option.xml | 24 + .../options/card_width_option_plugin.js | 43 + .../options/carousel_cards_item_option.js | 12 + .../options/carousel_cards_item_option.xml | 10 + .../plugins/options/chart_option.js | 177 ++++ .../plugins/options/chart_option.scss | 28 + .../plugins/options/chart_option.xml | 153 +++ .../plugins/options/chart_option_plugin.js | 277 +++++ .../controller_page_listing_layout_option.xml | 13 + ...oller_page_listing_layout_option_plugin.js | 74 ++ .../plugins/options/cookies_bar_option.js | 94 ++ .../plugins/options/cookies_bar_option.xml | 19 + .../options/cover_properties_option.js | 14 + .../options/cover_properties_option.xml | 42 + .../options/cover_properties_option_plugin.js | 170 +++ .../plugins/options/cta_badge_option.xml | 9 + .../options/cta_badge_option_plugin.js | 16 + .../plugins/options/dot_option.xml | 16 + .../dynamic_snippet_carousel_option.js | 12 + .../dynamic_snippet_carousel_option.xml | 17 + .../dynamic_snippet_carousel_option_plugin.js | 65 ++ .../plugins/options/dynamic_snippet_hook.js | 74 ++ .../plugins/options/dynamic_snippet_option.js | 18 + .../options/dynamic_snippet_option.xml | 43 + .../options/dynamic_snippet_option_plugin.js | 183 ++++ .../plugins/options/embed_code_option.xml | 19 + .../options/embed_code_option_dialog.js | 32 + .../options/embed_code_option_dialog.xml | 22 + .../options/embed_code_option_plugin.js | 80 ++ .../plugins/options/facebook_option.xml | 25 + .../plugins/options/facebook_option_plugin.js | 155 +++ .../plugins/options/faq_horizontal_option.xml | 16 + .../options/faq_horizontal_option_plugin.js | 17 + .../plugins/options/footer_option.xml | 86 ++ .../plugins/options/footer_option_plugin.js | 86 ++ .../options/gallery_element_option.xml | 15 + .../options/gallery_element_option_plugin.js | 40 + .../google_maps_api_key_dialog.js | 58 + .../google_maps_api_key_dialog.xml | 56 + .../google_maps_option/google_maps_option.js | 93 ++ .../google_maps_option.scss | 55 + .../google_maps_option/google_maps_option.xml | 77 ++ .../google_maps_option_plugin.js | 279 +++++ .../google_maps_option/google_maps_service.js | 132 +++ .../plugins/options/header_border_option.js | 16 + .../plugins/options/header_border_option.xml | 11 + .../plugins/options/header_option.js | 108 ++ .../plugins/options/header_option.xml | 377 +++++++ .../options/image_gallery_option.inside.scss | 10 + .../plugins/options/image_gallery_option.js | 15 + .../plugins/options/image_gallery_option.xml | 99 ++ .../options/image_gallery_option_plugin.js | 462 ++++++++ .../options/image_snippet_option_plugin.js | 37 + .../plugins/options/instagram_option.xml | 13 + .../options/instagram_option_plugin.js | 115 ++ .../plugins/options/many2one_option.js | 21 + .../plugins/options/many2one_option.xml | 10 + .../plugins/options/many2one_option_plugin.js | 77 ++ .../plugins/options/map_option.inside.scss | 5 + .../plugins/options/map_option.xml | 48 + .../plugins/options/map_option_plugin.js | 60 ++ .../plugins/options/media_list_item_option.js | 15 + .../options/media_list_item_option.xml | 55 + .../plugins/options/media_list_option.xml | 16 + .../options/media_list_option_plugin.js | 50 + .../plugins/options/mega_menu_option.js | 15 + .../plugins/options/mega_menu_option.xml | 90 ++ .../options/mega_menu_option_plugin.js | 47 + .../plugins/options/navbar_logo_option.xml | 19 + .../options/navbar_logo_option_plugin.js | 22 + .../plugins/options/navtabs_header_buttons.js | 31 + .../options/navtabs_header_buttons.xml | 20 + .../options/navtabs_header_buttons_plugin.js | 101 ++ .../options/navtabs_images_style_option.xml | 14 + .../plugins/options/navtabs_style_option.xml | 53 + .../options/navtabs_style_option_plugin.js | 146 +++ .../plugins/options/parallax_option.js | 6 + .../plugins/options/parallax_option.xml | 51 + .../plugins/options/parallax_option_plugin.js | 108 ++ .../plugins/options/popup_option.xml | 66 ++ .../plugins/options/popup_option_plugin.js | 158 +++ .../pricelist_option/add_product_option.js | 9 + .../pricelist_option/add_product_option.xml | 17 + .../pricelist_boxed_option.xml | 15 + .../pricelist_boxed_option_plugin.js | 39 + .../pricelist_cafe_option.xml | 15 + .../pricelist_option/pricelist_cafe_plugin.js | 45 + .../pricelist_option/pricelist_plugin.js | 51 + .../product_catalog_option.xml | 15 + .../product_catalog_plugin.js | 39 + .../plugins/options/process_steps_option.js | 22 + .../plugins/options/process_steps_option.xml | 19 + .../options/process_steps_option_plugin.js | 260 +++++ .../plugins/options/progress_bar_option.xml | 27 + .../options/progress_bar_option_plugin.js | 91 ++ .../plugins/options/scroll_button_option.js | 22 + .../plugins/options/scroll_button_option.xml | 39 + .../options/scroll_button_option_plugin.js | 98 ++ .../plugins/options/searchbar_option.js | 17 + .../plugins/options/searchbar_option.xml | 44 + .../options/searchbar_option_plugin.js | 162 +++ .../plugins/options/social_media_links.js | 166 +++ .../plugins/options/social_media_links.xml | 58 + .../options/social_media_option.inside.scss | 3 + .../plugins/options/social_media_option.xml | 35 + .../options/social_media_option_plugin.js | 402 +++++++ .../options/table_of_content_option.xml | 29 + .../options/table_of_content_option_plugin.js | 224 ++++ .../plugins/options/timeline_list_option.xml | 25 + .../options/timeline_list_option_plugin.js | 29 + .../plugins/options/timeline_option.xml | 18 + .../plugins/options/timeline_option_plugin.js | 73 ++ .../website_builder/plugins/options/utils.js | 14 + .../plugins/options/visibility_option.js | 8 + .../plugins/options/visibility_option.xml | 93 ++ .../options/visibility_option_plugin.js | 282 +++++ .../website_background_option_plugin.js | 79 ++ .../plugins/options/website_info_option.xml | 12 + .../options/website_info_option_plugin.js | 22 + .../options/website_page_config_option.xml | 28 + .../website_page_config_option_plugin.js | 148 +++ .../plugins/switchable_views.js | 16 + .../plugins/switchable_views.xml | 14 + .../plugins/switchable_views_plugin.js | 47 + .../plugins/theme/theme_advanced_option.js | 23 + .../plugins/theme/theme_advanced_option.xml | 70 ++ .../plugins/theme/theme_colors_option.js | 78 ++ .../plugins/theme/theme_colors_option.xml | 167 +++ .../plugins/theme/theme_tab.js | 22 + .../plugins/theme/theme_tab.xml | 310 ++++++ .../plugins/theme/theme_tab_plugin.js | 263 +++++ .../plugins/website_edit_service.js | 294 ++++++ .../plugins/website_session_plugin.js | 13 + .../website_crm_partner_assign_option.js | 19 + .../website_crm_partner_assign_option.xml | 16 + ...ebsite_crm_partner_assign_option_plugin.js | 24 + .../customer_filter_option.js | 15 + .../customer_filter_option.xml | 27 + .../customer_filter_option_plugin.js | 18 + .../dynamic_snippet_events_option.js | 14 + .../dynamic_snippet_events_option.xml | 24 + .../dynamic_snippet_events_option_plugin.js | 34 + .../src/website_event/event_page_option.xml | 21 + .../website_event/event_page_option_plugin.js | 77 ++ .../website_event/event_searchbar_option.xml | 12 + .../event_searchbar_option_plugin.js | 36 + .../website_event/events_list_page_option.xml | 50 + .../events_list_page_option_plugin.js | 18 + .../src/website_event/speaker_bio_plugin.js | 11 + .../event_page_option.xml | 19 + .../event_page_option_plugin.js | 25 + .../event_track_page_option.xml | 21 + .../event_track_page_option_plugin.js | 27 + .../src/website_forum/forum_page_option.xml | 21 + .../website_forum/forum_page_option_plugin.js | 20 + .../website_forum/forum_searchbar_option.xml | 14 + .../forum_searchbar_option_plugin.js | 36 + .../website_helpdesk/help_center_option.xml | 18 + .../help_center_option_plugin.js | 20 + .../website_hr_recruitment_option.xml | 34 + .../website_hr_recruitment_option_plugin.js | 22 + ...ebsite_hr_recruitment_searchbar_option.xml | 12 + ..._hr_recruitment_searchbar_option_plugin.js | 19 + .../website_mail_group/mail_group_option.xml | 15 + .../mail_group_option_plugin.js | 97 ++ .../mailing_list_subscribe_option.inside.scss | 6 + .../mailing_list_subscribe_option.js | 17 + .../mailing_list_subscribe_option.xml | 32 + .../mailing_list_subscribe_option_plugin.js | 131 +++ .../newsletter_layout_option.xml | 28 + .../newsletter_layout_option_plugin.js | 48 + .../newsletter_popup_plugin.js | 11 + .../newsletter_subscribe_common_option.js | 15 + .../newsletter_subscribe_common_option.xml | 11 + ...wsletter_subscribe_common_option_plugin.js | 51 + .../recaptcha_subscribe_option.js | 8 + .../recaptcha_subscribe_option.xml | 11 + .../recaptcha_subscribe_option_plugin.js | 35 + .../newsletter_layout_option.xml | 17 + .../website_members_page_option.xml | 15 + .../website_members_page_option_plugin.js | 22 + .../src/website_preview/edit_in_backend.js | 35 + .../src/website_preview/edit_in_backend.xml | 12 + .../edit_website_systray_item.js | 83 ++ .../edit_website_systray_item.xml | 35 + .../website_preview/install_module_dialog.js | 23 + .../website_preview/install_module_dialog.xml | 13 + .../website_preview/mobile_preview_systray.js | 15 + .../mobile_preview_systray.scss | 5 + .../mobile_preview_systray.xml | 12 + .../website_preview/new_content_element.js | 31 + .../website_preview/new_content_element.xml | 18 + .../src/website_preview/new_content_modal.js | 238 +++++ .../src/website_preview/new_content_modal.xml | 30 + .../new_content_systray_item.js | 20 + .../new_content_systray_item.xml | 11 + .../publish_website_systray_item.js | 80 ++ .../website_preview/website_builder_action.js | 401 +++++++ .../website_builder_action.scss | 65 ++ .../website_builder_action.xml | 24 + .../src/website_preview/website_preview.scss | 19 + .../website_switcher_systray_item.js | 113 ++ .../website_switcher_systray_item.xml | 32 + .../website_preview/website_systray_item.js | 65 ++ .../website_preview/website_systray_item.xml | 15 + .../src/website_sale/add_to_card_option.js | 27 + .../src/website_sale/add_to_cart_option.xml | 31 + .../website_sale/add_to_cart_option_plugin.js | 141 +++ .../website_sale/attachment_media_dialog.js | 10 + .../src/website_sale/checkout_page_option.xml | 24 + .../checkout_page_option_plugin.js | 20 + .../dynamic_snippet_products_option.js | 38 + .../dynamic_snippet_products_option.xml | 35 + .../dynamic_snippet_products_option_plugin.js | 80 ++ .../src/website_sale/mega_menu_option.js | 16 + .../src/website_sale/mega_menu_option.xml | 18 + .../website_sale/mega_menu_option_plugin.js | 64 ++ .../website_sale/product_attribute_option.xml | 15 + .../product_attribute_option_plugin.js | 43 + .../src/website_sale/product_page_option.js | 33 + .../src/website_sale/product_page_option.xml | 119 +++ .../product_page_option_plugin.js | 369 +++++++ .../src/website_sale/products_item_option.js | 82 ++ .../src/website_sale/products_item_option.xml | 72 ++ .../products_item_option_plugin.js | 432 ++++++++ .../website_sale/products_list_page_option.js | 11 + .../products_list_page_option.xml | 129 +++ .../products_list_page_option_plugin.js | 65 ++ .../products_searchbar_option.xml | 12 + .../products_searchbar_option_plugin.js | 46 + .../static/src/website_sale/shared.js | 25 + .../src/website_sale/website_sale.editor.scss | 52 + .../website_sale_show_empty_option.xml | 12 + .../website_sale_show_empty_option_plugin.js | 22 + .../product_page_list_option.xml | 13 + .../product_page_option.xml | 25 + .../website_sale_loyalty/coupon_option.xml | 10 + .../coupon_option_plugin.js | 20 + .../checkout_page_option.xml | 12 + .../product_page_list_option.xml | 13 + .../product_page_option.xml | 16 + .../show_empty_option.xml | 13 + .../course_page_option.xml | 11 + .../course_page_option_plugin.js | 21 + .../courses_list_page_option.xml | 21 + .../courses_list_page_option_plugin.js | 27 + .../slides_searchbar_option.xml | 12 + .../slides_searchbar_option_plugin.js | 38 + .../slides_forum_page_option.xml | 10 + .../slides_forum_page_option_plugin.js | 20 + .../tests/block_tab/snippet_content.test.js | 125 +++ .../tests/block_tab/snippet_groups.test.js | 473 +++++++++ .../static/tests/builder_action.test.js | 125 +++ .../static/tests/builder_option.test.js | 123 +++ .../static/tests/builder_overlay.test.js | 169 +++ .../tests/clean_for_save_options.test.js | 61 ++ .../static/tests/composite_action.test.js | 94 ++ .../basic_many2many.test.js | 82 ++ .../builder_components/builder_button.test.js | 779 ++++++++++++++ .../builder_button_group.test.js | 187 ++++ .../builder_checkbox.test.js | 75 ++ .../builder_colorpicker.test.js | 205 ++++ .../builder_context.test.js | 34 + .../builder_datetimepicker.test.js | 124 +++ .../builder_many2many.test.js | 123 +++ .../builder_many2one.test.js | 72 ++ .../builder_number_input.test.js | 639 +++++++++++ .../builder_components/builder_range.test.js | 47 + .../builder_components/builder_row.test.js | 244 +++++ .../builder_select_item.test.js | 330 ++++++ .../builder_text_input.test.js | 46 + .../builder_urlpicker.test.js | 141 +++ .../model_many2many.test.js | 88 ++ .../builder_shorthand_action.test.js | 241 +++++ .../custom_tab/container_buttons.test.js | 340 ++++++ .../custom_tab/invisibily_options.test.js | 171 +++ .../static/tests/custom_tab/misc.test.js | 676 ++++++++++++ .../static/tests/drop_zone.test.js | 36 + .../static/tests/edit_interaction.test.js | 111 ++ .../html_builder/static/tests/editor.test.js | 55 + .../static/tests/grid_layout.test.js | 82 ++ addons/html_builder/static/tests/helpers.js | 245 +++++ .../static/tests/image_shape.test.js | 477 +++++++++ .../static/tests/image_test_helpers.js | 34 + .../html_builder/static/tests/images.test.js | 93 ++ .../static/tests/invisible_elements.test.js | 127 +++ .../static/tests/operation.test.js | 118 +++ .../border_configurator_option.test.js | 60 ++ .../static/tests/options/card_option.test.js | 217 ++++ .../options/content_width_option.test.js | 14 + .../tests/options/countdown_option.test.js | 48 + .../tests/options/grid_column_option.test.js | 34 + .../tests/options/layout_option.test.js | 58 + .../tests/options/option_container.test.js | 36 + .../options/pricelist_boxed_option.test.js | 30 + .../tests/options/rating_option.test.js | 74 ++ .../tests/options/separator_options.test.js | 18 + .../tests/options/shadow_option.test.js | 68 ++ .../tests/options/spacing_option.test.js | 63 ++ .../top_menu_visibility_option.test.js | 117 +++ .../static/tests/overlay_buttons.test.js | 367 +++++++ .../static/tests/preview_mode.test.js | 42 + addons/html_builder/static/tests/save.test.js | 87 ++ .../static/tests/setup_html_builder.test.js | 56 + .../static/tests/snippets_getter.hoot.js | 29 + .../static/tests/snippets_menu.test.js | 132 +++ .../static/tests/translation.test.js | 137 +++ .../website_builder/animate_option.test.js | 315 ++++++ .../tests/website_builder/background.test.js | 49 + .../website_builder/background_option.test.js | 177 ++++ .../website_builder/button_option.test.js | 103 ++ .../website_builder/chart_option.test.js | 308 ++++++ .../cookies_bar_option.test.js | 53 + .../cover_properties_option.test.js | 111 ++ .../website_builder/customize_website.test.js | 227 ++++ .../website_builder/image_gallery.test.js | 183 ++++ .../image_snippet_option.test.js | 80 ++ .../website_builder/many2one_option.test.js | 41 + .../website_builder/popup_option.test.js | 62 ++ .../website_builder/searchbar_option.test.js | 91 ++ .../website_builder/social_media.test.js | 170 +++ .../website_builder/steps_options.test.js | 18 + .../table_of_content_option.test.js | 149 +++ .../website_builder/timeline_option.test.js | 38 + .../static/tests/website_helpers.js | 506 +++++++++ addons/html_builder/views/views.xml | 15 + addons/html_editor/__manifest__.py | 1 + .../static/lib/webgl-image-filter/LICENSE | 21 + .../webgl-image-filter/webgl-image-filter.js | 650 ++++++++++++ .../static/src/core/delete_plugin.js | 15 +- .../static/src/core/history_plugin.js | 253 ++++- addons/html_editor/static/src/core/overlay.js | 27 +- .../static/src/core/overlay_plugin.js | 3 +- .../static/src/core/selection_plugin.js | 27 + addons/html_editor/static/src/editor.js | 2 + .../static/src/local_overlay_container.js | 11 +- .../static/src/main/font/color_plugin.js | 45 +- .../static/src/main/font/font_selector.js | 2 +- .../static/src/main/hint_plugin.js | 2 +- .../static/src/main/link/link_plugin.js | 11 +- .../static/src/main/link/link_popover.js | 10 +- .../media/dblclick_image_preview_plugin.js | 14 + .../static/src/main/media/image_crop.js | 81 +- .../src/main/media/image_crop_plugin.js | 52 +- .../src/main/media/image_description.js | 2 +- .../static/src/main/media/image_plugin.js | 8 +- .../main/media/image_post_process_plugin.js | 466 ++++++++ .../src/main/media/image_transform_button.js | 1 + .../main/media/media_dialog/file_selector.js | 27 +- .../main/media/media_dialog/image_selector.js | 53 + .../media/media_dialog/image_selector.xml | 10 +- .../main/media/media_dialog/media_dialog.js | 4 +- .../static/src/main/media/media_plugin.js | 37 +- .../static/src/main/movenode_plugin.js | 9 +- .../static/src/main/power_buttons_plugin.js | 23 +- .../static/src/main/toolbar/toolbar.xml | 2 +- .../static/src/main/toolbar/toolbar_plugin.js | 23 +- .../collaboration/collaboration_plugin.js | 31 +- .../src/others/embedded_component_plugin.js | 46 +- .../static/src/others/qweb_plugin.js | 6 +- addons/html_editor/static/src/plugin_sets.js | 4 + .../html_editor/static/src/utils/dom_info.js | 2 + .../static/src/utils/drag_and_drop.js | 25 +- addons/html_editor/static/src/utils/image.js | 54 + .../static/src/utils/image_processing.js | 446 +------- .../static/tests/_helpers/selection.js | 6 +- .../html_editor/static/tests/banner.test.js | 39 + .../html_editor/static/tests/history.test.js | 100 +- addons/html_editor/static/tests/paste.test.js | 12 +- .../html_editor/static/tests/toolbar.test.js | 33 +- addons/mail/tests/discuss/test_ui.py | 4 +- .../mass_mailing_sms/tests/test_mailing_ui.py | 4 +- addons/portal/tests/test_tours.py | 5 + addons/project_todo/tests/test_todo_ui.py | 4 +- .../tests/test_survey_ui_certification.py | 4 +- .../survey/tests/test_survey_ui_feedback.py | 4 +- .../test_website/tests/test_custom_snippet.py | 4 +- addons/test_website/tests/test_form.py | 4 +- .../tests/test_image_upload_progress.py | 4 +- addons/test_website/tests/test_media.py | 4 +- addons/test_website/tests/test_reset_views.py | 3 + .../tests/test_restricted_editor.py | 5 + addons/test_website/tests/test_settings.py | 3 + .../tests/test_snippet_background_video.py | 5 +- .../tests/test_website_controller_page.py | 3 + .../tests/test_configurator.py | 4 +- .../tests/test_ui_wslides.py | 4 +- .../web/static/lib/bootstrap/js/dist/modal.js | 2 +- addons/web/static/src/core/assets.js | 8 +- .../src/core/color_picker/color_picker.js | 28 +- .../src/core/color_picker/color_picker.scss | 1 - .../src/core/color_picker/color_picker.xml | 53 +- .../gradient_picker/gradient_picker.js | 1 + .../gradient_picker/gradient_picker.xml | 4 +- addons/web/static/src/core/position/utils.js | 12 +- .../src/core/select_menu/select_menu.js | 10 +- addons/web/static/src/core/utils/scrolling.js | 5 + addons/web/static/src/public/colibri.js | 36 +- .../static/src/public/interaction_service.js | 6 +- .../src/webclient/actions/action_service.js | 4 + .../tests/_framework/mock_templates.hoot.js | 2 +- .../tests/_framework/module_set.hoot.js | 4 +- .../static/tests/public/interaction.test.js | 6 - addons/web/static/tests/web_test_helpers.js | 10 + addons/web/tests/test_js.py | 7 +- addons/web/tooling/_eslintignore | 4 + addons/web/tooling/_jsconfig.json | 1 + addons/web_editor/models/ir_ui_view.py | 1 + .../static/src/js/editor/snippets.editor.js | 1 + .../static/src/tour_service/tour_helpers.js | 14 + addons/website/__manifest__.py | 1 - .../website_preview/website_preview.js | 9 +- .../static/src/components/navbar/navbar.js | 4 +- .../static/src/core/website_edit_service.js | 6 +- .../static/src/core/website_map_service.js | 87 +- .../carousel/carousel_section_slider.edit.js | 2 + .../dropdown/mega_menu_dropdown.edit.js | 36 + .../dropdown/mega_menu_dropdown.js | 6 - .../interactions/full_screen_height.edit.js | 16 + .../src/interactions/full_screen_height.js | 6 - .../static/src/interactions/popup/popup.js | 16 - .../src/interactions/popup/shared_popup.js | 4 +- .../src/interactions/video/media_video.js | 18 + .../zoomed_background_shape.edit.js | 16 + .../interactions/zoomed_background_shape.js | 6 - .../static/src/js/content/website_root.js | 3 + .../static/src/js/form_editor_registry.js | 3 - .../website/static/src/js/send_mail_form.js | 4 +- .../website/static/src/js/tours/tour_utils.js | 113 +- addons/website/static/src/js/utils.js | 13 +- .../static/src/services/website_service.js | 11 +- .../src/snippets/s_dynamic_snippet/000.scss | 3 +- .../s_dynamic_snippet/dynamic_snippet.js | 4 +- .../s_facebook_page/facebook_page.edit.js | 17 + .../snippets/s_facebook_page/facebook_page.js | 5 - .../src/snippets/s_google_map/google_map.js | 6 +- .../s_instagram_page/instagram_page.js | 4 - .../s_instagram_page/s_instagram_page.edit.js | 18 + .../static/src/snippets/s_map/000.scss | 6 - .../src/snippets/s_website_form/options.js | 9 +- .../static/src/systray_items/new_content.scss | 2 +- .../tests/tours/carousel_content_removal.js | 4 +- .../website/static/tests/tours/colorpicker.js | 36 +- .../tests/tours/configurator_translation.js | 6 +- .../default_shape_gets_palette_colors.js | 2 +- .../dropdowns_and_header_hide_on_scroll.js | 10 +- .../tests/tours/edit_translated_page.js | 2 +- .../tours/editable_root_as_custom_snippet.js | 6 +- .../website/static/tests/tours/font_family.js | 26 +- .../website/static/tests/tours/grid_layout.js | 8 +- .../website/static/tests/tours/html_editor.js | 4 +- .../tests/tours/interaction_lifecycle.js | 4 +- .../static/tests/tours/media_dialog.js | 30 +- .../static/tests/tours/snippet_countdown.js | 13 +- .../tests/tours/snippet_image_gallery.js | 8 +- .../tests/tours/snippet_popup_add_remove.js | 10 +- .../static/tests/tours/snippet_rating.js | 11 +- .../static/tests/tours/snippet_version.js | 10 +- .../static/tests/tours/website_form_editor.js | 505 ++++----- .../tests/tours/website_no_dirty_page.js | 10 +- .../tests/tours/website_seo_notification.js | 8 +- .../tests/tours/website_snippets_menu_tabs.js | 10 +- .../tests/tours/website_text_edition.js | 43 +- .../tests/tours/website_text_font_size.js | 30 +- addons/website/tests/test_attachment.py | 3 + addons/website/tests/test_client_action.py | 3 + addons/website/tests/test_configurator.py | 1 + addons/website/tests/test_custom_snippets.py | 2 + addons/website/tests/test_grid_layout.py | 2 + addons/website/tests/test_page_manager.py | 2 + .../tests/test_skip_website_configurator.py | 2 + addons/website/tests/test_snippets.py | 14 + addons/website/tests/test_ui.py | 45 + addons/website/tests/test_unsplash_beacon.py | 1 + .../website/tests/test_website_form_editor.py | 5 +- .../tests/test_website_reset_password.py | 2 + .../views/snippets/s_facebook_page.xml | 2 +- .../views/snippets/s_instagram_page.xml | 2 +- .../views/snippets/s_pricelist_cafe.xml | 5 + addons/website/views/website_templates.xml | 1 + addons/website_blog/__manifest__.py | 5 +- addons/website_blog/tests/test_ui.py | 4 +- .../static/src/js/website_crm_editor.js | 4 +- addons/website_crm/tests/test_website_crm.py | 4 +- addons/website_event/__manifest__.py | 4 + .../website_event/tests/test_website_event.py | 6 +- .../tests/test_frontend_buy_tickets.py | 7 + .../src/js/website_hr_recruitment_editor.js | 4 +- .../tests/test_website_hr_recruitment.py | 3 + .../static/src/js/mass_mailing_form_editor.js | 4 +- .../tests/test_snippets.py | 6 +- addons/website_payment/tests/test_snippets.py | 3 + .../static/src/js/website_project_editor.js | 4 +- addons/website_sale/__manifest__.py | 5 +- .../static/src/js/website_sale_form_editor.js | 55 +- addons/website_sale/tests/test_customize.py | 4 +- addons/website_sale/tests/test_delivery_ui.py | 5 +- .../website_sale/tests/test_sale_process.py | 5 +- .../website_sale/tests/test_website_editor.py | 5 + .../test_website_sale_add_to_cart_snippet.py | 3 + .../test_website_sale_cart_notification.py | 3 + .../tests/test_website_sale_cart_recovery.py | 4 +- .../test_website_sale_combo_configurator.py | 5 +- .../tests/test_website_sale_gmc.py | 7 + .../tests/test_website_sale_image.py | 7 + .../tests/test_website_sale_mail.py | 3 + .../test_website_sale_product_configurator.py | 9 + .../test_website_sale_reorder_from_portal.py | 3 + ...st_website_sale_show_compare_list_price.py | 3 + .../tests/test_website_sale_snippets.py | 5 + .../views/snippets/s_add_to_cart.xml | 4 +- .../tests/test_ui.py | 3 + .../tests/test_click_and_collect_flow.py | 3 + .../tests/test_website_sale_comparison.py | 3 + .../tests/test_shop_sale_coupon.py | 9 + .../test_website_sale_loyalty_delivery.py | 7 + .../test_website_sale_stock_configurators.py | 5 + .../test_website_sale_stock_multilang.py | 3 + ..._website_sale_stock_reorder_from_portal.py | 3 + .../test_website_sale_stock_stock_message.py | 5 + ...t_website_sale_stock_stock_notification.py | 4 +- ..._sale_stock_wishlist_stock_notification.py | 3 + .../tests/test_wishlist_process.py | 4 +- .../website_slides/tests/test_ui_wslides.py | 23 + odoo/addons/test_lint/tests/test_eslint.py | 4 + odoo/addons/test_lint/tests/test_i18n.py | 3 + .../addons/test_main_flows/tests/test_flow.py | 4 +- 973 files changed, 63297 insertions(+), 1331 deletions(-) create mode 100644 addons/html_builder/__init__.py create mode 100644 addons/html_builder/__manifest__.py create mode 100644 addons/html_builder/static/image_shapes/brushed/brush_1.svg create mode 100644 addons/html_builder/static/image_shapes/brushed/brush_2.svg create mode 100644 addons/html_builder/static/image_shapes/brushed/brush_3.svg create mode 100644 addons/html_builder/static/image_shapes/brushed/brush_4.svg create mode 100644 addons/html_builder/static/image_shapes/composite/composite_cut_circle.svg create mode 100644 addons/html_builder/static/image_shapes/composite/composite_double_pill.svg create mode 100644 addons/html_builder/static/image_shapes/composite/composite_half_circle.svg create mode 100644 addons/html_builder/static/image_shapes/composite/composite_sonar.svg create mode 100644 addons/html_builder/static/image_shapes/composite/composite_triple_pill.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_line_1.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_line_2.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_line_3.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_mixed_1.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_mixed_2.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_organic_line.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_oval_line.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_planet_1.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_planet_2.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_square_1.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_square_2.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_square_3.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_square_4.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_square_line.svg create mode 100644 addons/html_builder/static/image_shapes/composition/composition_triangle_line.svg create mode 100644 addons/html_builder/static/image_shapes/convert-to-percentages.html create mode 100644 addons/html_builder/static/image_shapes/convert-to-percentages.js create mode 100644 addons/html_builder/static/image_shapes/devices/browser_01.svg create mode 100644 addons/html_builder/static/image_shapes/devices/browser_02.svg create mode 100644 addons/html_builder/static/image_shapes/devices/browser_03.svg create mode 100644 addons/html_builder/static/image_shapes/devices/galaxy_3d_landscape_01.svg create mode 100644 addons/html_builder/static/image_shapes/devices/galaxy_3d_landscape_02.svg create mode 100644 addons/html_builder/static/image_shapes/devices/galaxy_3d_portrait_01.svg create mode 100644 addons/html_builder/static/image_shapes/devices/galaxy_3d_portrait_02.svg create mode 100644 addons/html_builder/static/image_shapes/devices/galaxy_front_landscape.svg create mode 100644 addons/html_builder/static/image_shapes/devices/galaxy_front_portrait.svg create mode 100644 addons/html_builder/static/image_shapes/devices/galaxy_front_portrait_half.svg create mode 100644 addons/html_builder/static/image_shapes/devices/imac_3d_01.svg create mode 100644 addons/html_builder/static/image_shapes/devices/imac_3d_02.svg create mode 100644 addons/html_builder/static/image_shapes/devices/imac_front.svg create mode 100644 addons/html_builder/static/image_shapes/devices/ipad_3d_landscape_01.svg create mode 100644 addons/html_builder/static/image_shapes/devices/ipad_3d_landscape_02.svg create mode 100644 addons/html_builder/static/image_shapes/devices/ipad_3d_portrait_01.svg create mode 100644 addons/html_builder/static/image_shapes/devices/ipad_3d_portrait_02.svg create mode 100644 addons/html_builder/static/image_shapes/devices/ipad_front_landscape.svg create mode 100644 addons/html_builder/static/image_shapes/devices/ipad_front_portrait.svg create mode 100644 addons/html_builder/static/image_shapes/devices/iphone_3d_landscape_01.svg create mode 100644 addons/html_builder/static/image_shapes/devices/iphone_3d_landscape_02.svg create mode 100644 addons/html_builder/static/image_shapes/devices/iphone_3d_portrait_01.svg create mode 100644 addons/html_builder/static/image_shapes/devices/iphone_3d_portrait_02.svg create mode 100644 addons/html_builder/static/image_shapes/devices/iphone_front_landscape.svg create mode 100644 addons/html_builder/static/image_shapes/devices/iphone_front_portrait.svg create mode 100644 addons/html_builder/static/image_shapes/devices/macbook_3d_01.svg create mode 100644 addons/html_builder/static/image_shapes/devices/macbook_3d_02.svg create mode 100644 addons/html_builder/static/image_shapes/devices/macbook_front.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_cornered_triangle.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_diamond.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_door.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_emerald.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_gem.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_heptagon.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_hexagon.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_kayak.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_pentagon.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_shuriken.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_slanted.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_sonar.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_square.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_square_1.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_square_2.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_square_3.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_square_4.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_square_5.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_square_6.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_star.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_star_16pin.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_star_8pin.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_tear.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_tetris.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_triangle.svg create mode 100644 addons/html_builder/static/image_shapes/geometric/geo_triangle_corner.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_hard.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_medium.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_soft.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_bread.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_circle.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_clover.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_cornered.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_diamond.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_door.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_emerald.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_gem.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_heptagon.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_hexagon.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_lemon.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_pentagon.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_pill.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_shuriken.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_sonar.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_square.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_square_1.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_square_2.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_star.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_star_16pin.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_star_7pin.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_star_8pin.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_tear.svg create mode 100644 addons/html_builder/static/image_shapes/geometric_round/geo_round_triangle.svg create mode 100644 addons/html_builder/static/image_shapes/panel/panel_duo.svg create mode 100644 addons/html_builder/static/image_shapes/panel/panel_duo_r.svg create mode 100644 addons/html_builder/static/image_shapes/panel/panel_duo_step.svg create mode 100644 addons/html_builder/static/image_shapes/panel/panel_duo_step_pill.svg create mode 100644 addons/html_builder/static/image_shapes/panel/panel_trio_in_r.svg create mode 100644 addons/html_builder/static/image_shapes/panel/panel_trio_out_r.svg create mode 100644 addons/html_builder/static/image_shapes/panel/panel_window.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_circuit.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_labyrinth.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_line_star.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_line_sun.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_organic_caps.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_organic_cross.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_organic_dot.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_oval_zebra.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_point.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_wave_1.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_wave_2.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_wave_3.svg create mode 100644 addons/html_builder/static/image_shapes/pattern/pattern_wave_4.svg create mode 100644 addons/html_builder/static/image_shapes/solid/solid_blob_1.svg create mode 100644 addons/html_builder/static/image_shapes/solid/solid_blob_2.svg create mode 100644 addons/html_builder/static/image_shapes/solid/solid_blob_3.svg create mode 100644 addons/html_builder/static/image_shapes/solid/solid_blob_4.svg create mode 100644 addons/html_builder/static/image_shapes/solid/solid_blob_5.svg create mode 100644 addons/html_builder/static/image_shapes/solid/solid_blob_shadow_1.svg create mode 100644 addons/html_builder/static/image_shapes/solid/solid_blob_shadow_2.svg create mode 100644 addons/html_builder/static/image_shapes/solid/solid_square_1.svg create mode 100644 addons/html_builder/static/image_shapes/solid/solid_square_2.svg create mode 100644 addons/html_builder/static/image_shapes/solid/solid_square_3.svg create mode 100644 addons/html_builder/static/image_shapes/special/special_filter.svg create mode 100644 addons/html_builder/static/image_shapes/special/special_flag.svg create mode 100644 addons/html_builder/static/image_shapes/special/special_layered.svg create mode 100644 addons/html_builder/static/image_shapes/special/special_organic.svg create mode 100644 addons/html_builder/static/image_shapes/special/special_rain.svg create mode 100644 addons/html_builder/static/image_shapes/special/special_snow.svg create mode 100644 addons/html_builder/static/image_shapes/special/special_speed.svg create mode 100644 addons/html_builder/static/img/options/bg_shape.svg create mode 100644 addons/html_builder/static/img/options/bring-backward.svg create mode 100644 addons/html_builder/static/img/options/bring-forward.svg create mode 100644 addons/html_builder/static/img/options/desktop_invisible.svg create mode 100644 addons/html_builder/static/img/options/mobile_invisible.svg create mode 100644 addons/html_builder/static/img/options/pos_left.svg create mode 100644 addons/html_builder/static/img/options/pos_right.svg create mode 100644 addons/html_builder/static/img/options/shadow_in.svg create mode 100644 addons/html_builder/static/img/options/shadow_out.svg create mode 100644 addons/html_builder/static/img/options/size_large.svg create mode 100644 addons/html_builder/static/img/options/size_medium.svg create mode 100644 addons/html_builder/static/img/options/size_small.svg create mode 100644 addons/html_builder/static/img/phone.png create mode 100644 addons/html_builder/static/img/snippet_disabled.svg create mode 100644 addons/html_builder/static/src/bootstrap_overriden.scss create mode 100644 addons/html_builder/static/src/builder.js create mode 100644 addons/html_builder/static/src/builder.scss create mode 100644 addons/html_builder/static/src/builder.variables.scss create mode 100644 addons/html_builder/static/src/builder.xml create mode 100644 addons/html_builder/static/src/core/anchor/anchor_dialog.js create mode 100644 addons/html_builder/static/src/core/anchor/anchor_dialog.xml create mode 100644 addons/html_builder/static/src/core/anchor/anchor_plugin.js create mode 100644 addons/html_builder/static/src/core/builder_actions_plugin.js create mode 100644 addons/html_builder/static/src/core/builder_component_plugin.js create mode 100644 addons/html_builder/static/src/core/builder_options_plugin.js create mode 100644 addons/html_builder/static/src/core/builder_overlay/builder_overlay.js create mode 100644 addons/html_builder/static/src/core/builder_overlay/builder_overlay.scss create mode 100644 addons/html_builder/static/src/core/builder_overlay/builder_overlay.xml create mode 100644 addons/html_builder/static/src/core/builder_overlay/builder_overlay_plugin.js create mode 100644 addons/html_builder/static/src/core/building_blocks/basic_many2many.js create mode 100644 addons/html_builder/static/src/core/building_blocks/basic_many2many.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/basic_many2one.js create mode 100644 addons/html_builder/static/src/core/building_blocks/basic_many2one.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_button.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_button.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_button_group.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_button_group.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_checkbox.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_checkbox.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_colorpicker.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_component.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_context.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_datetimepicker.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_datetimepicker.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_many2many.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_many2many.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_many2one.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_many2one.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_number_input.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_number_input.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_range.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_range.scss create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_range.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_row.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_row.scss create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_row.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_select.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_select.scss create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_select.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_select_item.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_select_item.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_text_input.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_text_input.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_text_input_base.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_text_input_base.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_urlpicker.js create mode 100644 addons/html_builder/static/src/core/building_blocks/builder_urlpicker.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/model_many2many.js create mode 100644 addons/html_builder/static/src/core/building_blocks/model_many2many.xml create mode 100644 addons/html_builder/static/src/core/building_blocks/select_many2x.js create mode 100644 addons/html_builder/static/src/core/building_blocks/select_many2x.xml create mode 100644 addons/html_builder/static/src/core/cached_model_plugin.js create mode 100644 addons/html_builder/static/src/core/cached_model_utils.js create mode 100644 addons/html_builder/static/src/core/clone_plugin.js create mode 100644 addons/html_builder/static/src/core/color_style_plugin.js create mode 100644 addons/html_builder/static/src/core/composite_action_plugin.js create mode 100644 addons/html_builder/static/src/core/core_builder_action_plugin.js create mode 100644 addons/html_builder/static/src/core/core_plugins.js create mode 100644 addons/html_builder/static/src/core/customize_tab_plugin.js create mode 100644 addons/html_builder/static/src/core/dependency_manager.js create mode 100644 addons/html_builder/static/src/core/disable_snippets_plugin.js create mode 100644 addons/html_builder/static/src/core/drag_and_drop_plugin.js create mode 100644 addons/html_builder/static/src/core/drop_zone_plugin.inside.scss create mode 100644 addons/html_builder/static/src/core/drop_zone_plugin.js create mode 100644 addons/html_builder/static/src/core/dropzone_selector_plugin.js create mode 100644 addons/html_builder/static/src/core/editor.inside.scss create mode 100644 addons/html_builder/static/src/core/grid_layout/grid_layout.inside.scss create mode 100644 addons/html_builder/static/src/core/grid_layout/grid_layout.xml create mode 100644 addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js create mode 100644 addons/html_builder/static/src/core/img.js create mode 100644 addons/html_builder/static/src/core/media_website_plugin.js create mode 100644 addons/html_builder/static/src/core/move_plugin.js create mode 100644 addons/html_builder/static/src/core/operation.inside.scss create mode 100644 addons/html_builder/static/src/core/operation.js create mode 100644 addons/html_builder/static/src/core/operation_plugin.js create mode 100644 addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.js create mode 100644 addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.scss create mode 100644 addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.xml create mode 100644 addons/html_builder/static/src/core/overlay_buttons/overlay_buttons_plugin.js create mode 100644 addons/html_builder/static/src/core/remove_plugin.js create mode 100644 addons/html_builder/static/src/core/replace_plugin.js create mode 100644 addons/html_builder/static/src/core/save_plugin.js create mode 100644 addons/html_builder/static/src/core/save_snippet_plugin.js create mode 100644 addons/html_builder/static/src/core/setup_editor_plugin.js create mode 100644 addons/html_builder/static/src/core/utils.js create mode 100644 addons/html_builder/static/src/core/utils/update_on_img_changed.js create mode 100644 addons/html_builder/static/src/core/version_control_plugin.js create mode 100644 addons/html_builder/static/src/core/visibility_plugin.js create mode 100644 addons/html_builder/static/src/interactions/carousel.edit.js create mode 100644 addons/html_builder/static/src/interactions/google_map.edit.js create mode 100644 addons/html_builder/static/src/interactions/image_gallery.edit.js create mode 100644 addons/html_builder/static/src/interactions/image_gallery.edit.xml create mode 100644 addons/html_builder/static/src/interactions/social_media.edit.js create mode 100644 addons/html_builder/static/src/interactions/social_media.edit.xml create mode 100644 addons/html_builder/static/src/plugins/alert_option.xml create mode 100644 addons/html_builder/static/src/plugins/alert_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_hook.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_image.xml create mode 100644 addons/html_builder/static/src/plugins/background_option/background_image_option.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_image_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_option.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_option.xml create mode 100644 addons/html_builder/static/src/plugins/background_option/background_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_position_option.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_position_option.xml create mode 100644 addons/html_builder/static/src/plugins/background_option/background_position_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_position_overlay.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_position_overlay.scss create mode 100644 addons/html_builder/static/src/plugins/background_option/background_position_overlay.xml create mode 100644 addons/html_builder/static/src/plugins/background_option/background_shape_option.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_shape_option.xml create mode 100644 addons/html_builder/static/src/plugins/background_option/background_shape_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/background_option/background_shapes_definition.js create mode 100644 addons/html_builder/static/src/plugins/block_alignment_option.xml create mode 100644 addons/html_builder/static/src/plugins/block_alignment_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/border_configurator_option.js create mode 100644 addons/html_builder/static/src/plugins/border_configurator_option.xml create mode 100644 addons/html_builder/static/src/plugins/carousel_bottom_controllers_option.xml create mode 100644 addons/html_builder/static/src/plugins/carousel_cards_option.xml create mode 100644 addons/html_builder/static/src/plugins/carousel_item_header_buttons.js create mode 100644 addons/html_builder/static/src/plugins/carousel_option.xml create mode 100644 addons/html_builder/static/src/plugins/carousel_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/content_width_option.inside.scss create mode 100644 addons/html_builder/static/src/plugins/content_width_option.xml create mode 100644 addons/html_builder/static/src/plugins/content_width_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/countdown_option.inside.scss create mode 100644 addons/html_builder/static/src/plugins/countdown_option.xml create mode 100644 addons/html_builder/static/src/plugins/countdown_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/dynamic_svg_option.js create mode 100644 addons/html_builder/static/src/plugins/dynamic_svg_option.xml create mode 100644 addons/html_builder/static/src/plugins/dynamic_svg_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/font_awesome_option.xml create mode 100644 addons/html_builder/static/src/plugins/font_awesome_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/image/image_grid_option.js create mode 100644 addons/html_builder/static/src/plugins/image/image_grid_option.xml create mode 100644 addons/html_builder/static/src/plugins/image/image_grid_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/image/image_helpers.js create mode 100644 addons/html_builder/static/src/plugins/image/image_optimize_plugin.js create mode 100644 addons/html_builder/static/src/plugins/image/image_shape_option.js create mode 100644 addons/html_builder/static/src/plugins/image/image_shape_option.xml create mode 100644 addons/html_builder/static/src/plugins/image/image_shape_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/image/image_shapes_definition.js create mode 100644 addons/html_builder/static/src/plugins/image/image_tool_option.js create mode 100644 addons/html_builder/static/src/plugins/image/image_tool_option.xml create mode 100644 addons/html_builder/static/src/plugins/image/image_tool_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/image/replace_media_option.js create mode 100644 addons/html_builder/static/src/plugins/image/replace_media_option.xml create mode 100644 addons/html_builder/static/src/plugins/layout_option/add_element_option.js create mode 100644 addons/html_builder/static/src/plugins/layout_option/add_element_option.xml create mode 100644 addons/html_builder/static/src/plugins/layout_option/add_element_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/layout_option/grid_column_option.js create mode 100644 addons/html_builder/static/src/plugins/layout_option/grid_column_option.xml create mode 100644 addons/html_builder/static/src/plugins/layout_option/grid_column_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/layout_option/layout_option.js create mode 100644 addons/html_builder/static/src/plugins/layout_option/layout_option.xml create mode 100644 addons/html_builder/static/src/plugins/layout_option/layout_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/layout_option/select_number_column.js create mode 100644 addons/html_builder/static/src/plugins/layout_option/select_number_column.xml create mode 100644 addons/html_builder/static/src/plugins/layout_option/spacing_option.js create mode 100644 addons/html_builder/static/src/plugins/layout_option/spacing_option.xml create mode 100644 addons/html_builder/static/src/plugins/layout_option/spacing_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/rating_option.xml create mode 100644 addons/html_builder/static/src/plugins/rating_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/section_background_option.xml create mode 100644 addons/html_builder/static/src/plugins/separator_option.xml create mode 100644 addons/html_builder/static/src/plugins/separator_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/shadow_option.js create mode 100644 addons/html_builder/static/src/plugins/shadow_option.xml create mode 100644 addons/html_builder/static/src/plugins/shadow_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/shape/shape_selector.js create mode 100644 addons/html_builder/static/src/plugins/shape/shape_selector.xml create mode 100644 addons/html_builder/static/src/plugins/size_option.xml create mode 100644 addons/html_builder/static/src/plugins/size_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/snippets_powerbox_plugin.js create mode 100644 addons/html_builder/static/src/plugins/text_alignment_option.xml create mode 100644 addons/html_builder/static/src/plugins/text_alignment_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/timeline_images_option.xml create mode 100644 addons/html_builder/static/src/plugins/timeline_images_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/utils.js create mode 100644 addons/html_builder/static/src/plugins/vertical_alignment_option.js create mode 100644 addons/html_builder/static/src/plugins/vertical_alignment_option.xml create mode 100644 addons/html_builder/static/src/plugins/vertical_alignment_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/vertical_justify_option.xml create mode 100644 addons/html_builder/static/src/plugins/vertical_justify_option_plugin.js create mode 100644 addons/html_builder/static/src/plugins/width_option.xml create mode 100644 addons/html_builder/static/src/plugins/width_option_plugin.js create mode 100644 addons/html_builder/static/src/sidebar/block_tab.js create mode 100644 addons/html_builder/static/src/sidebar/block_tab.scss create mode 100644 addons/html_builder/static/src/sidebar/block_tab.xml create mode 100644 addons/html_builder/static/src/sidebar/custom_inner_snippet.js create mode 100644 addons/html_builder/static/src/sidebar/custom_inner_snippet.xml create mode 100644 addons/html_builder/static/src/sidebar/customize_component.js create mode 100644 addons/html_builder/static/src/sidebar/customize_component.xml create mode 100644 addons/html_builder/static/src/sidebar/customize_tab.js create mode 100644 addons/html_builder/static/src/sidebar/customize_tab.xml create mode 100644 addons/html_builder/static/src/sidebar/invisible_elements.inside.scss create mode 100644 addons/html_builder/static/src/sidebar/invisible_elements_panel.js create mode 100644 addons/html_builder/static/src/sidebar/invisible_elements_panel.xml create mode 100644 addons/html_builder/static/src/sidebar/option_container.js create mode 100644 addons/html_builder/static/src/sidebar/option_container.scss create mode 100644 addons/html_builder/static/src/sidebar/option_container.xml create mode 100644 addons/html_builder/static/src/sidebar/snippet.js create mode 100644 addons/html_builder/static/src/sidebar/snippet.xml create mode 100644 addons/html_builder/static/src/snippets/add_snippet_dialog.js create mode 100644 addons/html_builder/static/src/snippets/add_snippet_dialog.scss create mode 100644 addons/html_builder/static/src/snippets/add_snippet_dialog.xml create mode 100644 addons/html_builder/static/src/snippets/input_confirmation_dialog.js create mode 100644 addons/html_builder/static/src/snippets/input_confirmation_dialog.xml create mode 100644 addons/html_builder/static/src/snippets/snippet_service.js create mode 100644 addons/html_builder/static/src/snippets/snippet_viewer.js create mode 100644 addons/html_builder/static/src/snippets/snippet_viewer.scss create mode 100644 addons/html_builder/static/src/snippets/snippet_viewer.xml create mode 100644 addons/html_builder/static/src/translate.inside.scss create mode 100644 addons/html_builder/static/src/utils/column_layout_utils.js create mode 100644 addons/html_builder/static/src/utils/grid_layout_utils.js create mode 100644 addons/html_builder/static/src/utils/option_sequence.js create mode 100644 addons/html_builder/static/src/utils/scrolling.js create mode 100644 addons/html_builder/static/src/utils/sync_cache.js create mode 100644 addons/html_builder/static/src/utils/utils.js create mode 100644 addons/html_builder/static/src/utils/utils_css.js create mode 100644 addons/html_builder/static/src/website_blog/author_avatar_many2one_plugin.js create mode 100644 addons/html_builder/static/src/website_blog/blog_cover_properties_option.js create mode 100644 addons/html_builder/static/src/website_blog/blog_cover_properties_option.xml create mode 100644 addons/html_builder/static/src/website_blog/blog_page_option.xml create mode 100644 addons/html_builder/static/src/website_blog/blog_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_blog/blog_post_page_option.xml create mode 100644 addons/html_builder/static/src/website_blog/blog_post_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_blog/blog_post_tags_option.js create mode 100644 addons/html_builder/static/src/website_blog/blog_post_tags_option.xml create mode 100644 addons/html_builder/static/src/website_blog/blog_post_tags_option_plugin.js create mode 100644 addons/html_builder/static/src/website_blog/blog_searchbar_option.xml create mode 100644 addons/html_builder/static/src/website_blog/blog_searchbar_option_plugin.js create mode 100644 addons/html_builder/static/src/website_blog/dynamic_snippet_blog_posts_option.js create mode 100644 addons/html_builder/static/src/website_blog/dynamic_snippet_blog_posts_option.xml create mode 100644 addons/html_builder/static/src/website_blog/dynamic_snippet_blog_posts_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/builder_fontfamilypicker.js create mode 100644 addons/html_builder/static/src/website_builder/builder_fontfamilypicker.xml create mode 100644 addons/html_builder/static/src/website_builder/option_sequence.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/customize_website_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/edit_interaction_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/font/add_font_dialog.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/font/add_font_dialog.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/font/font_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/form/form_action_fields_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/form/form_field_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/form/form_field_option_redraw.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/form/form_model_required_field_alert.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/form/form_option.inside.scss create mode 100644 addons/html_builder/static/src/website_builder/plugins/form/form_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/form/form_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/form/form_option_add_field_button.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/form/utils.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/accordion_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/accordion_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/animate_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/animate_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/animate_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/background_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/background_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/background_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/background_video_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/badge_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/badge_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/blockquote_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/blockquote_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/border_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/border_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/button_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/card_image_alignment_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/card_image_alignment_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/card_image_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/card_image_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/card_image_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/card_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/card_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/card_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/card_width_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/card_width_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/carousel_cards_item_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/carousel_cards_item_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/chart_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/chart_option.scss create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/chart_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/chart_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/controller_page_listing_layout_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/controller_page_listing_layout_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/cookies_bar_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/cookies_bar_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/cover_properties_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/cover_properties_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/cover_properties_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/cta_badge_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/cta_badge_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/dot_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_carousel_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_carousel_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_carousel_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_hook.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/embed_code_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/embed_code_option_dialog.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/embed_code_option_dialog.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/embed_code_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/facebook_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/facebook_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/faq_horizontal_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/faq_horizontal_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/footer_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/footer_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/gallery_element_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/gallery_element_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_api_key_dialog.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_api_key_dialog.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_option.scss create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/google_maps_option/google_maps_service.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/header_border_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/header_border_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/header_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/header_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.inside.scss create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/image_snippet_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/instagram_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/instagram_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/many2one_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/many2one_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/many2one_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/map_option.inside.scss create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/map_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/map_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/media_list_item_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/media_list_item_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/media_list_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/media_list_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/mega_menu_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/mega_menu_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/mega_menu_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/navbar_logo_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/navbar_logo_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/navtabs_header_buttons.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/navtabs_header_buttons.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/navtabs_header_buttons_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/navtabs_images_style_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/navtabs_style_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/navtabs_style_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/parallax_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/parallax_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/parallax_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/popup_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/add_product_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/add_product_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_boxed_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_boxed_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_cafe_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_cafe_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/product_catalog_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/product_catalog_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/process_steps_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/process_steps_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/process_steps_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/progress_bar_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/progress_bar_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/scroll_button_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/scroll_button_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/scroll_button_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/searchbar_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/searchbar_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/searchbar_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/social_media_links.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/social_media_links.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/social_media_option.inside.scss create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/social_media_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/social_media_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/table_of_content_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/table_of_content_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/timeline_list_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/timeline_list_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/timeline_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/timeline_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/utils.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/visibility_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/visibility_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/visibility_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/website_background_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/website_info_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/website_info_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/website_page_config_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/options/website_page_config_option_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/switchable_views.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/switchable_views.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/switchable_views_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/theme/theme_advanced_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/theme/theme_advanced_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/theme/theme_colors_option.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/theme/theme_colors_option.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/theme/theme_tab.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/theme/theme_tab.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/theme/theme_tab_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/website_edit_service.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/website_session_plugin.js create mode 100644 addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option.js create mode 100644 addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option.xml create mode 100644 addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option_plugin.js create mode 100644 addons/html_builder/static/src/website_customer/customer_filter_option.js create mode 100644 addons/html_builder/static/src/website_customer/customer_filter_option.xml create mode 100644 addons/html_builder/static/src/website_customer/customer_filter_option_plugin.js create mode 100644 addons/html_builder/static/src/website_event/dynamic_snippet_events_option.js create mode 100644 addons/html_builder/static/src/website_event/dynamic_snippet_events_option.xml create mode 100644 addons/html_builder/static/src/website_event/dynamic_snippet_events_option_plugin.js create mode 100644 addons/html_builder/static/src/website_event/event_page_option.xml create mode 100644 addons/html_builder/static/src/website_event/event_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_event/event_searchbar_option.xml create mode 100644 addons/html_builder/static/src/website_event/event_searchbar_option_plugin.js create mode 100644 addons/html_builder/static/src/website_event/events_list_page_option.xml create mode 100644 addons/html_builder/static/src/website_event/events_list_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_event/speaker_bio_plugin.js create mode 100644 addons/html_builder/static/src/website_event_exhibitor/event_page_option.xml create mode 100644 addons/html_builder/static/src/website_event_exhibitor/event_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_event_track/event_track_page_option.xml create mode 100644 addons/html_builder/static/src/website_event_track/event_track_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_forum/forum_page_option.xml create mode 100644 addons/html_builder/static/src/website_forum/forum_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_forum/forum_searchbar_option.xml create mode 100644 addons/html_builder/static/src/website_forum/forum_searchbar_option_plugin.js create mode 100644 addons/html_builder/static/src/website_helpdesk/help_center_option.xml create mode 100644 addons/html_builder/static/src/website_helpdesk/help_center_option_plugin.js create mode 100644 addons/html_builder/static/src/website_hr_recruitment/website_hr_recruitment_option.xml create mode 100644 addons/html_builder/static/src/website_hr_recruitment/website_hr_recruitment_option_plugin.js create mode 100644 addons/html_builder/static/src/website_hr_recruitment/website_hr_recruitment_searchbar_option.xml create mode 100644 addons/html_builder/static/src/website_hr_recruitment/website_hr_recruitment_searchbar_option_plugin.js create mode 100644 addons/html_builder/static/src/website_mail_group/mail_group_option.xml create mode 100644 addons/html_builder/static/src/website_mail_group/mail_group_option_plugin.js create mode 100644 addons/html_builder/static/src/website_mass_mailing/mailing_list_subscribe_option.inside.scss create mode 100644 addons/html_builder/static/src/website_mass_mailing/mailing_list_subscribe_option.js create mode 100644 addons/html_builder/static/src/website_mass_mailing/mailing_list_subscribe_option.xml create mode 100644 addons/html_builder/static/src/website_mass_mailing/mailing_list_subscribe_option_plugin.js create mode 100644 addons/html_builder/static/src/website_mass_mailing/newsletter_layout_option.xml create mode 100644 addons/html_builder/static/src/website_mass_mailing/newsletter_layout_option_plugin.js create mode 100644 addons/html_builder/static/src/website_mass_mailing/newsletter_popup_plugin.js create mode 100644 addons/html_builder/static/src/website_mass_mailing/newsletter_subscribe_common_option.js create mode 100644 addons/html_builder/static/src/website_mass_mailing/newsletter_subscribe_common_option.xml create mode 100644 addons/html_builder/static/src/website_mass_mailing/newsletter_subscribe_common_option_plugin.js create mode 100644 addons/html_builder/static/src/website_mass_mailing/recaptcha_subscribe_option.js create mode 100644 addons/html_builder/static/src/website_mass_mailing/recaptcha_subscribe_option.xml create mode 100644 addons/html_builder/static/src/website_mass_mailing/recaptcha_subscribe_option_plugin.js create mode 100644 addons/html_builder/static/src/website_mass_mailing_sms/newsletter_layout_option.xml create mode 100644 addons/html_builder/static/src/website_membership/website_members_page_option.xml create mode 100644 addons/html_builder/static/src/website_membership/website_members_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_preview/edit_in_backend.js create mode 100644 addons/html_builder/static/src/website_preview/edit_in_backend.xml create mode 100644 addons/html_builder/static/src/website_preview/edit_website_systray_item.js create mode 100644 addons/html_builder/static/src/website_preview/edit_website_systray_item.xml create mode 100644 addons/html_builder/static/src/website_preview/install_module_dialog.js create mode 100644 addons/html_builder/static/src/website_preview/install_module_dialog.xml create mode 100644 addons/html_builder/static/src/website_preview/mobile_preview_systray.js create mode 100644 addons/html_builder/static/src/website_preview/mobile_preview_systray.scss create mode 100644 addons/html_builder/static/src/website_preview/mobile_preview_systray.xml create mode 100644 addons/html_builder/static/src/website_preview/new_content_element.js create mode 100644 addons/html_builder/static/src/website_preview/new_content_element.xml create mode 100644 addons/html_builder/static/src/website_preview/new_content_modal.js create mode 100644 addons/html_builder/static/src/website_preview/new_content_modal.xml create mode 100644 addons/html_builder/static/src/website_preview/new_content_systray_item.js create mode 100644 addons/html_builder/static/src/website_preview/new_content_systray_item.xml create mode 100644 addons/html_builder/static/src/website_preview/publish_website_systray_item.js create mode 100644 addons/html_builder/static/src/website_preview/website_builder_action.js create mode 100644 addons/html_builder/static/src/website_preview/website_builder_action.scss create mode 100644 addons/html_builder/static/src/website_preview/website_builder_action.xml create mode 100644 addons/html_builder/static/src/website_preview/website_preview.scss create mode 100644 addons/html_builder/static/src/website_preview/website_switcher_systray_item.js create mode 100644 addons/html_builder/static/src/website_preview/website_switcher_systray_item.xml create mode 100644 addons/html_builder/static/src/website_preview/website_systray_item.js create mode 100644 addons/html_builder/static/src/website_preview/website_systray_item.xml create mode 100644 addons/html_builder/static/src/website_sale/add_to_card_option.js create mode 100644 addons/html_builder/static/src/website_sale/add_to_cart_option.xml create mode 100644 addons/html_builder/static/src/website_sale/add_to_cart_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale/attachment_media_dialog.js create mode 100644 addons/html_builder/static/src/website_sale/checkout_page_option.xml create mode 100644 addons/html_builder/static/src/website_sale/checkout_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale/dynamic_snippet_products_option.js create mode 100644 addons/html_builder/static/src/website_sale/dynamic_snippet_products_option.xml create mode 100644 addons/html_builder/static/src/website_sale/dynamic_snippet_products_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale/mega_menu_option.js create mode 100644 addons/html_builder/static/src/website_sale/mega_menu_option.xml create mode 100644 addons/html_builder/static/src/website_sale/mega_menu_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale/product_attribute_option.xml create mode 100644 addons/html_builder/static/src/website_sale/product_attribute_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale/product_page_option.js create mode 100644 addons/html_builder/static/src/website_sale/product_page_option.xml create mode 100644 addons/html_builder/static/src/website_sale/product_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale/products_item_option.js create mode 100644 addons/html_builder/static/src/website_sale/products_item_option.xml create mode 100644 addons/html_builder/static/src/website_sale/products_item_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale/products_list_page_option.js create mode 100644 addons/html_builder/static/src/website_sale/products_list_page_option.xml create mode 100644 addons/html_builder/static/src/website_sale/products_list_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale/products_searchbar_option.xml create mode 100644 addons/html_builder/static/src/website_sale/products_searchbar_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale/shared.js create mode 100644 addons/html_builder/static/src/website_sale/website_sale.editor.scss create mode 100644 addons/html_builder/static/src/website_sale/website_sale_show_empty_option.xml create mode 100644 addons/html_builder/static/src/website_sale/website_sale_show_empty_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale_comparison/product_page_list_option.xml create mode 100644 addons/html_builder/static/src/website_sale_comparison/product_page_option.xml create mode 100644 addons/html_builder/static/src/website_sale_loyalty/coupon_option.xml create mode 100644 addons/html_builder/static/src/website_sale_loyalty/coupon_option_plugin.js create mode 100644 addons/html_builder/static/src/website_sale_wishlist/checkout_page_option.xml create mode 100644 addons/html_builder/static/src/website_sale_wishlist/product_page_list_option.xml create mode 100644 addons/html_builder/static/src/website_sale_wishlist/product_page_option.xml create mode 100644 addons/html_builder/static/src/website_sale_wishlist/show_empty_option.xml create mode 100644 addons/html_builder/static/src/website_sales_slides/course_page_option.xml create mode 100644 addons/html_builder/static/src/website_sales_slides/course_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_slides/courses_list_page_option.xml create mode 100644 addons/html_builder/static/src/website_slides/courses_list_page_option_plugin.js create mode 100644 addons/html_builder/static/src/website_slides/slides_searchbar_option.xml create mode 100644 addons/html_builder/static/src/website_slides/slides_searchbar_option_plugin.js create mode 100644 addons/html_builder/static/src/website_slides_forum/slides_forum_page_option.xml create mode 100644 addons/html_builder/static/src/website_slides_forum/slides_forum_page_option_plugin.js create mode 100644 addons/html_builder/static/tests/block_tab/snippet_content.test.js create mode 100644 addons/html_builder/static/tests/block_tab/snippet_groups.test.js create mode 100644 addons/html_builder/static/tests/builder_action.test.js create mode 100644 addons/html_builder/static/tests/builder_option.test.js create mode 100644 addons/html_builder/static/tests/builder_overlay.test.js create mode 100644 addons/html_builder/static/tests/clean_for_save_options.test.js create mode 100644 addons/html_builder/static/tests/composite_action.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/basic_many2many.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_button.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_button_group.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_checkbox.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_colorpicker.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_context.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_datetimepicker.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_many2many.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_many2one.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_number_input.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_range.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_row.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_select_item.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_text_input.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/builder_urlpicker.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_components/model_many2many.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/builder_shorthand_action.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/container_buttons.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/invisibily_options.test.js create mode 100644 addons/html_builder/static/tests/custom_tab/misc.test.js create mode 100644 addons/html_builder/static/tests/drop_zone.test.js create mode 100644 addons/html_builder/static/tests/edit_interaction.test.js create mode 100644 addons/html_builder/static/tests/editor.test.js create mode 100644 addons/html_builder/static/tests/grid_layout.test.js create mode 100644 addons/html_builder/static/tests/helpers.js create mode 100644 addons/html_builder/static/tests/image_shape.test.js create mode 100644 addons/html_builder/static/tests/image_test_helpers.js create mode 100644 addons/html_builder/static/tests/images.test.js create mode 100644 addons/html_builder/static/tests/invisible_elements.test.js create mode 100644 addons/html_builder/static/tests/operation.test.js create mode 100644 addons/html_builder/static/tests/options/border_configurator_option.test.js create mode 100644 addons/html_builder/static/tests/options/card_option.test.js create mode 100644 addons/html_builder/static/tests/options/content_width_option.test.js create mode 100644 addons/html_builder/static/tests/options/countdown_option.test.js create mode 100644 addons/html_builder/static/tests/options/grid_column_option.test.js create mode 100644 addons/html_builder/static/tests/options/layout_option.test.js create mode 100644 addons/html_builder/static/tests/options/option_container.test.js create mode 100644 addons/html_builder/static/tests/options/pricelist_boxed_option.test.js create mode 100644 addons/html_builder/static/tests/options/rating_option.test.js create mode 100644 addons/html_builder/static/tests/options/separator_options.test.js create mode 100644 addons/html_builder/static/tests/options/shadow_option.test.js create mode 100644 addons/html_builder/static/tests/options/spacing_option.test.js create mode 100644 addons/html_builder/static/tests/options/top_menu_visibility_option.test.js create mode 100644 addons/html_builder/static/tests/overlay_buttons.test.js create mode 100644 addons/html_builder/static/tests/preview_mode.test.js create mode 100644 addons/html_builder/static/tests/save.test.js create mode 100644 addons/html_builder/static/tests/setup_html_builder.test.js create mode 100644 addons/html_builder/static/tests/snippets_getter.hoot.js create mode 100644 addons/html_builder/static/tests/snippets_menu.test.js create mode 100644 addons/html_builder/static/tests/translation.test.js create mode 100644 addons/html_builder/static/tests/website_builder/animate_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/background.test.js create mode 100644 addons/html_builder/static/tests/website_builder/background_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/button_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/chart_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/cookies_bar_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/cover_properties_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/customize_website.test.js create mode 100644 addons/html_builder/static/tests/website_builder/image_gallery.test.js create mode 100644 addons/html_builder/static/tests/website_builder/image_snippet_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/many2one_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/popup_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/searchbar_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/social_media.test.js create mode 100644 addons/html_builder/static/tests/website_builder/steps_options.test.js create mode 100644 addons/html_builder/static/tests/website_builder/table_of_content_option.test.js create mode 100644 addons/html_builder/static/tests/website_builder/timeline_option.test.js create mode 100644 addons/html_builder/static/tests/website_helpers.js create mode 100644 addons/html_builder/views/views.xml create mode 100644 addons/html_editor/static/lib/webgl-image-filter/LICENSE create mode 100644 addons/html_editor/static/lib/webgl-image-filter/webgl-image-filter.js create mode 100644 addons/html_editor/static/src/main/media/dblclick_image_preview_plugin.js create mode 100644 addons/html_editor/static/src/main/media/image_post_process_plugin.js create mode 100644 addons/website/static/src/interactions/dropdown/mega_menu_dropdown.edit.js create mode 100644 addons/website/static/src/interactions/full_screen_height.edit.js create mode 100644 addons/website/static/src/interactions/zoomed_background_shape.edit.js delete mode 100644 addons/website/static/src/js/form_editor_registry.js create mode 100644 addons/website/static/src/snippets/s_facebook_page/facebook_page.edit.js create mode 100644 addons/website/static/src/snippets/s_instagram_page/s_instagram_page.edit.js diff --git a/addons/account_fleet/tests/test_account_fleet.py b/addons/account_fleet/tests/test_account_fleet.py index 055d85253a500..94f62ad7d8734 100644 --- a/addons/account_fleet/tests/test_account_fleet.py +++ b/addons/account_fleet/tests/test_account_fleet.py @@ -3,10 +3,13 @@ from freezegun import freeze_time from odoo.tests import tagged +import unittest from odoo.addons.account.tests.common import AccountTestInvoicingCommon +# TODO master-mysterious-egg fix error +@unittest.skip("prepare mysterious-egg for merging") @tagged('post_install', '-at_install') class TestAccountFleet(AccountTestInvoicingCommon): diff --git a/addons/account_fleet/tests/test_fleet_vehicle_log_services.py b/addons/account_fleet/tests/test_fleet_vehicle_log_services.py index 50bea163b40f8..1e486c09134ae 100644 --- a/addons/account_fleet/tests/test_fleet_vehicle_log_services.py +++ b/addons/account_fleet/tests/test_fleet_vehicle_log_services.py @@ -3,7 +3,10 @@ from odoo.exceptions import UserError from odoo.tests import tagged from odoo.addons.account.tests.common import AccountTestInvoicingCommon +import unittest +# TODO master-mysterious-egg fix error +@unittest.skip("prepare mysterious-egg for merging") @tagged('post_install', '-at_install') class TestFleetVehicleLogServices(AccountTestInvoicingCommon): diff --git a/addons/html_builder/__init__.py b/addons/html_builder/__init__.py new file mode 100644 index 0000000000000..40a96afc6ff09 --- /dev/null +++ b/addons/html_builder/__init__.py @@ -0,0 +1 @@ +# -*- coding: utf-8 -*- diff --git a/addons/html_builder/__manifest__.py b/addons/html_builder/__manifest__.py new file mode 100644 index 0000000000000..c8ba22862daf1 --- /dev/null +++ b/addons/html_builder/__manifest__.py @@ -0,0 +1,85 @@ +# -*- coding: utf-8 -*- +{ + 'name': "HTML Builder", + 'summary': "Generic html builder", + 'description': """ + This addon contains a generic html builder application. It is designed to be + used by the website builder and mass mailing editor. + """, + + 'author': "Odoo", + 'website': "https://www.odoo.com", + + # Categories can be used to filter modules in modules listing + # Check https://github.com/odoo/odoo/blob/15.0/odoo/addons/base/data/ir_module_category_data.xml + # for the full list + 'category': 'Uncategorized', + 'version': '0.1', + 'auto_install': True, + + # any module necessary for this one to work correctly + 'depends': ['base', 'html_editor', 'website'], + + # always loaded + 'data': [ + # 'security/ir.model.access.csv', + 'views/views.xml', + ], + + 'assets': { + 'web.assets_backend': [ + 'html_builder/static/src/website_preview/**/*', + 'website/static/src/xml/website_form_editor.xml', + # TODO Remove the module's form js - this is for testing. + 'website/static/src/js/send_mail_form.js', + # TODO when moving options to website: load this from website + # directly. This file is loaded in assets_wysiwyg in website, but we + # need to load it here for html_builder. + 'website/static/src/xml/website.cookies_bar.xml', + ], + # this bundle is lazy loaded when the editor is ready + 'html_builder.assets': [ + ('include', 'web._assets_helpers'), + + 'html_builder/static/src/bootstrap_overriden.scss', + 'web/static/src/scss/pre_variables.scss', + 'web/static/lib/bootstrap/scss/_variables.scss', + 'web/static/lib/bootstrap/scss/_variables-dark.scss', + 'web/static/lib/bootstrap/scss/_maps.scss', + + 'html_builder/static/src/**/*', + ('remove', 'html_builder/static/src/website_preview/**/*'), + ('remove', 'html_builder/static/src/website_builder/plugins/website_edit_service.js'), + ('remove', 'html_builder/static/src/interactions/**/*'), + ], + 'html_builder.inside_builder_style': [ + ('include', 'web._assets_helpers'), + ('include', 'web._assets_primary_variables'), + 'web/static/src/scss/bootstrap_overridden.scss', + 'html_builder/static/src/**/*.inside.scss', + ], + 'html_builder.assets_edit_frontend': [ + ('include', 'website.assets_edit_frontend'), + 'html_builder/static/src/interactions/**/*.edit.*', + # website_edit_service must reference the right history + ('replace', 'website/static/src/core/website_edit_service.js', 'html_builder/static/src/website_builder/plugins/website_edit_service.js'), + # this imports website_edit_service from its old location, let's get rid of it + ('remove', 'website/static/src/interactions/carousel/carousel_bootstrap_upgrade_fix.edit.js'), + # the google map edit interaction was reimplemented locally to replace this + ('remove', 'website/static/src/snippets/s_google_map/google_map.edit.js'), + ], + 'html_builder.iframe_add_dialog': [ + ('include', 'web.assets_frontend'), + 'html_builder/static/src/snippets/snippet_viewer.scss' + ], + 'web.assets_unit_tests': [ + 'html_builder/static/tests/**/*', + ('include', 'html_builder.assets'), + ], + 'web.assets_frontend': [ + 'html_builder/static/src/interactions/**/*', + ('remove', 'html_builder/static/src/interactions/**/*.edit.*'), + ], + }, + 'license': 'LGPL-3', +} diff --git a/addons/html_builder/static/image_shapes/brushed/brush_1.svg b/addons/html_builder/static/image_shapes/brushed/brush_1.svg new file mode 100644 index 0000000000000..e678941e21b0d --- /dev/null +++ b/addons/html_builder/static/image_shapes/brushed/brush_1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/brushed/brush_2.svg b/addons/html_builder/static/image_shapes/brushed/brush_2.svg new file mode 100644 index 0000000000000..bd3c076dfabd6 --- /dev/null +++ b/addons/html_builder/static/image_shapes/brushed/brush_2.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/brushed/brush_3.svg b/addons/html_builder/static/image_shapes/brushed/brush_3.svg new file mode 100644 index 0000000000000..25afa96887c3b --- /dev/null +++ b/addons/html_builder/static/image_shapes/brushed/brush_3.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/brushed/brush_4.svg b/addons/html_builder/static/image_shapes/brushed/brush_4.svg new file mode 100644 index 0000000000000..40276420a66ae --- /dev/null +++ b/addons/html_builder/static/image_shapes/brushed/brush_4.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composite/composite_cut_circle.svg b/addons/html_builder/static/image_shapes/composite/composite_cut_circle.svg new file mode 100644 index 0000000000000..217e9d89475f3 --- /dev/null +++ b/addons/html_builder/static/image_shapes/composite/composite_cut_circle.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composite/composite_double_pill.svg b/addons/html_builder/static/image_shapes/composite/composite_double_pill.svg new file mode 100644 index 0000000000000..2552cbab95ccd --- /dev/null +++ b/addons/html_builder/static/image_shapes/composite/composite_double_pill.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composite/composite_half_circle.svg b/addons/html_builder/static/image_shapes/composite/composite_half_circle.svg new file mode 100644 index 0000000000000..66cf7e842dc5a --- /dev/null +++ b/addons/html_builder/static/image_shapes/composite/composite_half_circle.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composite/composite_sonar.svg b/addons/html_builder/static/image_shapes/composite/composite_sonar.svg new file mode 100644 index 0000000000000..9a0cafc392900 --- /dev/null +++ b/addons/html_builder/static/image_shapes/composite/composite_sonar.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composite/composite_triple_pill.svg b/addons/html_builder/static/image_shapes/composite/composite_triple_pill.svg new file mode 100644 index 0000000000000..5af22bbf8ddec --- /dev/null +++ b/addons/html_builder/static/image_shapes/composite/composite_triple_pill.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_line_1.svg b/addons/html_builder/static/image_shapes/composition/composition_line_1.svg new file mode 100644 index 0000000000000..80f30dfeb7746 --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_line_1.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_line_2.svg b/addons/html_builder/static/image_shapes/composition/composition_line_2.svg new file mode 100644 index 0000000000000..96354a04bb619 --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_line_2.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_line_3.svg b/addons/html_builder/static/image_shapes/composition/composition_line_3.svg new file mode 100644 index 0000000000000..51eedb256b90f --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_line_3.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_mixed_1.svg b/addons/html_builder/static/image_shapes/composition/composition_mixed_1.svg new file mode 100644 index 0000000000000..7556a4fb3ec4d --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_mixed_1.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_mixed_2.svg b/addons/html_builder/static/image_shapes/composition/composition_mixed_2.svg new file mode 100644 index 0000000000000..f0cc8cdff9382 --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_mixed_2.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_organic_line.svg b/addons/html_builder/static/image_shapes/composition/composition_organic_line.svg new file mode 100644 index 0000000000000..25e1115da4efb --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_organic_line.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_oval_line.svg b/addons/html_builder/static/image_shapes/composition/composition_oval_line.svg new file mode 100644 index 0000000000000..c96baf591a47b --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_oval_line.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_planet_1.svg b/addons/html_builder/static/image_shapes/composition/composition_planet_1.svg new file mode 100644 index 0000000000000..ab8eae8a9ece2 --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_planet_1.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_planet_2.svg b/addons/html_builder/static/image_shapes/composition/composition_planet_2.svg new file mode 100644 index 0000000000000..afd938782d1a7 --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_planet_2.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_square_1.svg b/addons/html_builder/static/image_shapes/composition/composition_square_1.svg new file mode 100644 index 0000000000000..105162da79f8a --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_square_1.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_square_2.svg b/addons/html_builder/static/image_shapes/composition/composition_square_2.svg new file mode 100644 index 0000000000000..aa679f2067b5f --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_square_2.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_square_3.svg b/addons/html_builder/static/image_shapes/composition/composition_square_3.svg new file mode 100644 index 0000000000000..358c75ab6729a --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_square_3.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_square_4.svg b/addons/html_builder/static/image_shapes/composition/composition_square_4.svg new file mode 100644 index 0000000000000..2a5758f9ead9c --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_square_4.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_square_line.svg b/addons/html_builder/static/image_shapes/composition/composition_square_line.svg new file mode 100644 index 0000000000000..b27aeda7560eb --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_square_line.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/composition/composition_triangle_line.svg b/addons/html_builder/static/image_shapes/composition/composition_triangle_line.svg new file mode 100644 index 0000000000000..e0c5283475da0 --- /dev/null +++ b/addons/html_builder/static/image_shapes/composition/composition_triangle_line.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/convert-to-percentages.html b/addons/html_builder/static/image_shapes/convert-to-percentages.html new file mode 100644 index 0000000000000..cf93a00616bd6 --- /dev/null +++ b/addons/html_builder/static/image_shapes/convert-to-percentages.html @@ -0,0 +1,17 @@ + + + + + SVGs to Clip Path converter + + +

This tool is made to help designers import shapes that have a clip path component.

+

The shape must have at least one path set with an id="filterPath" and a maximum of 5 background colors

+ + +
+

Your download link will appear here

+
+ + + diff --git a/addons/html_builder/static/image_shapes/convert-to-percentages.js b/addons/html_builder/static/image_shapes/convert-to-percentages.js new file mode 100644 index 0000000000000..209445be32537 --- /dev/null +++ b/addons/html_builder/static/image_shapes/convert-to-percentages.js @@ -0,0 +1,175 @@ +// The goal of this script is to have a shape ready for use with the +// "Shape on Image" feature of Odoo. +// Therefor we need to rearrange the file a little. +// Marks which axis each parameter of a command belongs to, as well as whether +// It's a positional measurement (x/y), a distance (dx/dy) or none (angles, flags) +const commandAxes = { + M: ["x", "y"], + m: ["dx", "dy"], + L: ["x", "y"], + l: ["dx", "dy"], + H: ["x"], + h: ["dx"], + V: ["y"], + v: ["dy"], + Z: [], + z: [], + C: ["x", "y", "x", "y", "x", "y"], + c: ["dx", "dy", "dx", "dy", "dx", "dy"], + S: ["x", "y", "x", "y"], + s: ["dx", "dy", "dx", "dy"], + Q: ["x", "y", "x", "y"], + q: ["dx", "dy", "dx", "dy"], + T: ["x", "y"], + t: ["dx", "dy"], + A: ["dx", "dy", "none", "none", "none", "x", "y"], + a: ["dx", "dy", "none", "none", "none", "dx", "dy"], +}; + +const toUserSpace = (x, y, width, height, precision = 4) => ({ + x: (val) => +((parseFloat(val) - x) / width).toFixed(precision), + dx: (val) => +(parseFloat(val) / width).toFixed(precision), + y: (val) => +((parseFloat(val) - y) / height).toFixed(precision), + dy: (val) => +(parseFloat(val) / height).toFixed(precision), + none: (val) => val, +}); + +const filePicker = document.getElementById("svgPicker"); +const submitButton = document.getElementById("submitButton"); +submitButton.addEventListener("click", async (ev) => { + if (!filePicker.files.length > 0) { + alert("Please select files using the file picker first"); + return; + } + Array.from(filePicker.files).forEach(async (file) => { + const fileReader = new FileReader(); + const readerPromise = new Promise((resolve, reject) => { + fileReader.addEventListener("load", () => resolve(fileReader.result)); + fileReader.addEventListener("error", () => reject(fileReader.error)); + }); + fileReader.readAsText(file, "utf-8"); + const svgString = await readerPromise; + const parser = new DOMParser(); + const svg = parser.parseFromString(svgString, "image/svg+xml"); + const path = svg.getElementById("filterPath"); + const svgDocumentElement = svg.documentElement; + // Some SVGs come without xlink + svgDocumentElement.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"); + // We add the SVG to the body so we can take measurements of its + // original size + document.body.appendChild(svg.documentElement); + const { x, y, width, height } = svgDocumentElement.getBBox(); + const scalers = toUserSpace(x, y, width, height); + + // Converts the clipPath in values between 0 and 1 so we can use + // object bounding box as clip path units. It will make the clip path + // always adapt to the size of the picture. + const commands = path + .getAttribute("d") + .match(/[a-z][^a-z]*/gi) + .map((c) => c.split(/[, ]|(?=-)|(?<=[a-z])(?=[0-9])/i).filter((part) => !!part.length)); + const relSpaceCommands = commands.map(([command, ...nums]) => { + const axes = commandAxes[command]; + const relSpaceNums = nums.map((n, i) => { + const scaler = scalers[axes[i % axes.length]]; + return scaler(n); + }); + return `${command}${relSpaceNums.join(",")}`.replace(/,-/g, "-"); + }); + path.setAttribute("d", relSpaceCommands.join("")); + path.removeAttribute("fill"); + svgDocumentElement.removeAttribute("viewBox"); + + let defsEl = svgDocumentElement.querySelector("defs"); + if (!defsEl) { + defsEl = svg.createElementNS("http://www.w3.org/2000/svg", "defs"); + svgDocumentElement.appendChild(defsEl); + } + + let clipPathEl = svgDocumentElement.querySelector("clipPath"); + if (!clipPathEl) { + clipPathEl = svg.createElementNS("http://www.w3.org/2000/svg", "clipPath"); + clipPathEl.setAttribute("id", "clip-path"); + defsEl.appendChild(clipPathEl); + } + + clipPathEl.setAttribute("clipPathUnits", "objectBoundingBox"); + const backgroundEls = svgDocumentElement.getElementsByClassName("background"); + // We set the BG elements into their own svg so that when the total + // space gets stretched out, so does the backgrounds elements + Array.from(backgroundEls).forEach((el) => { + const bgBbox = el.getBBox(); + const svgBackground = document.createElement("svg"); + const strokeWidth = el.getAttribute("stroke-width"); + // If the background has a strokeWidth, the viewBox need to take it + // into account + if (strokeWidth) { + const adj = parseFloat(strokeWidth) / 2; + svgBackground.setAttributeNS( + "http://www.w3.org/2000/svg", + "viewBox", + `${bgBbox.x - adj} ${bgBbox.y - adj} ${bgBbox.width + adj * 2} ${ + bgBbox.height + adj * 2 + }` + ); + } else { + svgBackground.setAttributeNS( + "http://www.w3.org/2000/svg", + "viewBox", + `${bgBbox.x} ${bgBbox.y} ${bgBbox.width} ${bgBbox.height}` + ); + } + svgBackground.setAttributeNS( + "http://www.w3.org/2000/svg", + "preserveAspectRatio", + "none" + ); + svgBackground.appendChild(el); + svgDocumentElement.appendChild(svgBackground); + }); + + defsEl.appendChild(path); + // Setting the clip path for use and for preview + const useClipPathEl = document.createElementNS("http://www.w3.org/2000/svg", "use"); + useClipPathEl.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#filterPath"); + useClipPathEl.setAttribute("fill", "none"); + clipPathEl.appendChild(useClipPathEl); + + const svgPreviewEl = svg.createElementNS("http://www.w3.org/2000/svg", "svg"); + svgPreviewEl.setAttributeNS("http://www.w3.org/2000/svg", "viewBox", "0 0 1 1"); + svgPreviewEl.setAttribute("width", "600"); + svgPreviewEl.setAttribute("height", "600"); + svgPreviewEl.setAttribute("id", "preview"); + svgPreviewEl.setAttributeNS("http://www.w3.org/2000/svg", "preserveAspectRatio", "none"); + const previewUseEl = useClipPathEl.cloneNode(true); + previewUseEl.setAttribute("fill", "darkgrey"); + svgPreviewEl.appendChild(previewUseEl); + svgDocumentElement.appendChild(svgPreviewEl); + + const imageEl = document.createElement("image"); + imageEl.setAttribute("xlink:href", ""); + imageEl.setAttribute("clip-path", "url(#clip-path)"); + svgDocumentElement.appendChild(imageEl); + // Give a default size to the SVGs for an easier preview on disk + svgDocumentElement.setAttribute("width", "600"); + svgDocumentElement.setAttribute("height", "600"); + + const outFile = new File([svgDocumentElement.outerHTML], filePicker.files[0].name, { + type: "image/svg+xml", + }); + const outFileReader = new FileReader(); + const outReaderPromise = new Promise((resolve, reject) => { + outFileReader.addEventListener("load", () => resolve(outFileReader.result)); + outFileReader.addEventListener("error", () => reject(outFileReader.error)); + }); + outFileReader.readAsDataURL(outFile); + const dataURL = await outReaderPromise; + + const downloadLinkEl = document.createElement("a"); + downloadLinkEl.href = dataURL; + downloadLinkEl.innerText = "Download"; + downloadLinkEl.setAttribute("download", file.name); + downloadLinkEl.classList.add("dl_link"); + document.getElementById("downloadArea").appendChild(downloadLinkEl); + }); +}); diff --git a/addons/html_builder/static/image_shapes/devices/browser_01.svg b/addons/html_builder/static/image_shapes/devices/browser_01.svg new file mode 100644 index 0000000000000..f88dffbfa0c73 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/browser_01.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/browser_02.svg b/addons/html_builder/static/image_shapes/devices/browser_02.svg new file mode 100644 index 0000000000000..58e512be16d32 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/browser_02.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/browser_03.svg b/addons/html_builder/static/image_shapes/devices/browser_03.svg new file mode 100644 index 0000000000000..b430618b36ac2 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/browser_03.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/galaxy_3d_landscape_01.svg b/addons/html_builder/static/image_shapes/devices/galaxy_3d_landscape_01.svg new file mode 100644 index 0000000000000..32c140629256c --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/galaxy_3d_landscape_01.svg @@ -0,0 +1,178 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/galaxy_3d_landscape_02.svg b/addons/html_builder/static/image_shapes/devices/galaxy_3d_landscape_02.svg new file mode 100644 index 0000000000000..2aedd8a7d9ebf --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/galaxy_3d_landscape_02.svg @@ -0,0 +1,207 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/galaxy_3d_portrait_01.svg b/addons/html_builder/static/image_shapes/devices/galaxy_3d_portrait_01.svg new file mode 100644 index 0000000000000..0b0546889314e --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/galaxy_3d_portrait_01.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/galaxy_3d_portrait_02.svg b/addons/html_builder/static/image_shapes/devices/galaxy_3d_portrait_02.svg new file mode 100644 index 0000000000000..d28807ab406d0 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/galaxy_3d_portrait_02.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/galaxy_front_landscape.svg b/addons/html_builder/static/image_shapes/devices/galaxy_front_landscape.svg new file mode 100644 index 0000000000000..5a408892a11be --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/galaxy_front_landscape.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/galaxy_front_portrait.svg b/addons/html_builder/static/image_shapes/devices/galaxy_front_portrait.svg new file mode 100644 index 0000000000000..7d40258387cb0 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/galaxy_front_portrait.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/galaxy_front_portrait_half.svg b/addons/html_builder/static/image_shapes/devices/galaxy_front_portrait_half.svg new file mode 100644 index 0000000000000..7b49a30b3f470 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/galaxy_front_portrait_half.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/imac_3d_01.svg b/addons/html_builder/static/image_shapes/devices/imac_3d_01.svg new file mode 100644 index 0000000000000..77a3a0d03d7e8 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/imac_3d_01.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/imac_3d_02.svg b/addons/html_builder/static/image_shapes/devices/imac_3d_02.svg new file mode 100644 index 0000000000000..a7bf967437a3c --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/imac_3d_02.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/imac_front.svg b/addons/html_builder/static/image_shapes/devices/imac_front.svg new file mode 100644 index 0000000000000..94015cd7d501a --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/imac_front.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/ipad_3d_landscape_01.svg b/addons/html_builder/static/image_shapes/devices/ipad_3d_landscape_01.svg new file mode 100644 index 0000000000000..42d1802f49c6e --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/ipad_3d_landscape_01.svg @@ -0,0 +1,294 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/ipad_3d_landscape_02.svg b/addons/html_builder/static/image_shapes/devices/ipad_3d_landscape_02.svg new file mode 100644 index 0000000000000..89835c3fefca2 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/ipad_3d_landscape_02.svg @@ -0,0 +1,278 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/ipad_3d_portrait_01.svg b/addons/html_builder/static/image_shapes/devices/ipad_3d_portrait_01.svg new file mode 100644 index 0000000000000..875703867f958 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/ipad_3d_portrait_01.svg @@ -0,0 +1,281 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/ipad_3d_portrait_02.svg b/addons/html_builder/static/image_shapes/devices/ipad_3d_portrait_02.svg new file mode 100644 index 0000000000000..e3ac943572b6a --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/ipad_3d_portrait_02.svg @@ -0,0 +1,289 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/ipad_front_landscape.svg b/addons/html_builder/static/image_shapes/devices/ipad_front_landscape.svg new file mode 100644 index 0000000000000..9f438490158c9 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/ipad_front_landscape.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/ipad_front_portrait.svg b/addons/html_builder/static/image_shapes/devices/ipad_front_portrait.svg new file mode 100644 index 0000000000000..72e39176dc083 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/ipad_front_portrait.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/iphone_3d_landscape_01.svg b/addons/html_builder/static/image_shapes/devices/iphone_3d_landscape_01.svg new file mode 100644 index 0000000000000..17465d8e05392 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/iphone_3d_landscape_01.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/iphone_3d_landscape_02.svg b/addons/html_builder/static/image_shapes/devices/iphone_3d_landscape_02.svg new file mode 100644 index 0000000000000..f585761282d0b --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/iphone_3d_landscape_02.svg @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/iphone_3d_portrait_01.svg b/addons/html_builder/static/image_shapes/devices/iphone_3d_portrait_01.svg new file mode 100644 index 0000000000000..327e3db74dbd1 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/iphone_3d_portrait_01.svg @@ -0,0 +1,186 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/iphone_3d_portrait_02.svg b/addons/html_builder/static/image_shapes/devices/iphone_3d_portrait_02.svg new file mode 100644 index 0000000000000..342de99030456 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/iphone_3d_portrait_02.svg @@ -0,0 +1,171 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/iphone_front_landscape.svg b/addons/html_builder/static/image_shapes/devices/iphone_front_landscape.svg new file mode 100644 index 0000000000000..b095ef0e2deef --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/iphone_front_landscape.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/iphone_front_portrait.svg b/addons/html_builder/static/image_shapes/devices/iphone_front_portrait.svg new file mode 100644 index 0000000000000..230c80f727279 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/iphone_front_portrait.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/macbook_3d_01.svg b/addons/html_builder/static/image_shapes/devices/macbook_3d_01.svg new file mode 100644 index 0000000000000..4e79dfb2ad9d1 --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/macbook_3d_01.svg @@ -0,0 +1,178 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/macbook_3d_02.svg b/addons/html_builder/static/image_shapes/devices/macbook_3d_02.svg new file mode 100644 index 0000000000000..f57442c1fe3aa --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/macbook_3d_02.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/devices/macbook_front.svg b/addons/html_builder/static/image_shapes/devices/macbook_front.svg new file mode 100644 index 0000000000000..4a81df20b7cdc --- /dev/null +++ b/addons/html_builder/static/image_shapes/devices/macbook_front.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_cornered_triangle.svg b/addons/html_builder/static/image_shapes/geometric/geo_cornered_triangle.svg new file mode 100644 index 0000000000000..69163283edc52 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_cornered_triangle.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_diamond.svg b/addons/html_builder/static/image_shapes/geometric/geo_diamond.svg new file mode 100644 index 0000000000000..f6da7579c9f1d --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_diamond.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_door.svg b/addons/html_builder/static/image_shapes/geometric/geo_door.svg new file mode 100644 index 0000000000000..150d550e0874a --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_door.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_emerald.svg b/addons/html_builder/static/image_shapes/geometric/geo_emerald.svg new file mode 100644 index 0000000000000..52ed7fd41729a --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_emerald.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_gem.svg b/addons/html_builder/static/image_shapes/geometric/geo_gem.svg new file mode 100644 index 0000000000000..a0d4d73bdba60 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_gem.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_heptagon.svg b/addons/html_builder/static/image_shapes/geometric/geo_heptagon.svg new file mode 100644 index 0000000000000..d748766dad736 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_heptagon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_hexagon.svg b/addons/html_builder/static/image_shapes/geometric/geo_hexagon.svg new file mode 100644 index 0000000000000..12e3656266259 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_hexagon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_kayak.svg b/addons/html_builder/static/image_shapes/geometric/geo_kayak.svg new file mode 100644 index 0000000000000..a47851cba6a35 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_kayak.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_pentagon.svg b/addons/html_builder/static/image_shapes/geometric/geo_pentagon.svg new file mode 100644 index 0000000000000..c31fa0a0ad1fa --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_pentagon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_shuriken.svg b/addons/html_builder/static/image_shapes/geometric/geo_shuriken.svg new file mode 100644 index 0000000000000..5609b8d50853e --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_shuriken.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_slanted.svg b/addons/html_builder/static/image_shapes/geometric/geo_slanted.svg new file mode 100644 index 0000000000000..3b525c97777d4 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_slanted.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_sonar.svg b/addons/html_builder/static/image_shapes/geometric/geo_sonar.svg new file mode 100644 index 0000000000000..a7626c63dadc5 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_sonar.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_square.svg b/addons/html_builder/static/image_shapes/geometric/geo_square.svg new file mode 100644 index 0000000000000..1396c09d72ae7 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_square.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_square_1.svg b/addons/html_builder/static/image_shapes/geometric/geo_square_1.svg new file mode 100644 index 0000000000000..ccfe894889271 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_square_1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_square_2.svg b/addons/html_builder/static/image_shapes/geometric/geo_square_2.svg new file mode 100644 index 0000000000000..bb3265a7ba0d1 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_square_2.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_square_3.svg b/addons/html_builder/static/image_shapes/geometric/geo_square_3.svg new file mode 100644 index 0000000000000..3c5d1d75f9c18 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_square_3.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_square_4.svg b/addons/html_builder/static/image_shapes/geometric/geo_square_4.svg new file mode 100644 index 0000000000000..17c876308ebf8 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_square_4.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_square_5.svg b/addons/html_builder/static/image_shapes/geometric/geo_square_5.svg new file mode 100644 index 0000000000000..9d7337e416ce4 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_square_5.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_square_6.svg b/addons/html_builder/static/image_shapes/geometric/geo_square_6.svg new file mode 100644 index 0000000000000..1629f7447b8c6 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_square_6.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_star.svg b/addons/html_builder/static/image_shapes/geometric/geo_star.svg new file mode 100644 index 0000000000000..93aa58c832d62 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_star.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_star_16pin.svg b/addons/html_builder/static/image_shapes/geometric/geo_star_16pin.svg new file mode 100644 index 0000000000000..f80cc53ef1b35 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_star_16pin.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_star_8pin.svg b/addons/html_builder/static/image_shapes/geometric/geo_star_8pin.svg new file mode 100644 index 0000000000000..bf9be1076b86d --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_star_8pin.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_tear.svg b/addons/html_builder/static/image_shapes/geometric/geo_tear.svg new file mode 100644 index 0000000000000..8a542573926d4 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_tear.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_tetris.svg b/addons/html_builder/static/image_shapes/geometric/geo_tetris.svg new file mode 100644 index 0000000000000..1f1d528281b0e --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_tetris.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_triangle.svg b/addons/html_builder/static/image_shapes/geometric/geo_triangle.svg new file mode 100644 index 0000000000000..f3e9bc236b1b1 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_triangle.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric/geo_triangle_corner.svg b/addons/html_builder/static/image_shapes/geometric/geo_triangle_corner.svg new file mode 100644 index 0000000000000..658fb50b86749 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric/geo_triangle_corner.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_hard.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_hard.svg new file mode 100644 index 0000000000000..c39ed0765c44e --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_hard.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_medium.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_medium.svg new file mode 100644 index 0000000000000..472c2d2a45f0e --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_medium.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_soft.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_soft.svg new file mode 100644 index 0000000000000..2d6e77b4492ce --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_blob_soft.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_bread.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_bread.svg new file mode 100644 index 0000000000000..e60012a4f2270 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_bread.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_circle.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_circle.svg new file mode 100644 index 0000000000000..982f25b53bf3f --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_circle.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_clover.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_clover.svg new file mode 100644 index 0000000000000..f0b18d08de091 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_clover.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_cornered.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_cornered.svg new file mode 100644 index 0000000000000..6597500986c62 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_cornered.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_diamond.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_diamond.svg new file mode 100644 index 0000000000000..614018c92771a --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_diamond.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_door.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_door.svg new file mode 100644 index 0000000000000..ba235a5fb84d7 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_door.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_emerald.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_emerald.svg new file mode 100644 index 0000000000000..4fd59f70e26f9 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_emerald.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_gem.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_gem.svg new file mode 100644 index 0000000000000..49782b3c03650 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_gem.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_heptagon.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_heptagon.svg new file mode 100644 index 0000000000000..ccfd2a4502b30 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_heptagon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_hexagon.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_hexagon.svg new file mode 100644 index 0000000000000..2de75a6af1fdd --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_hexagon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_lemon.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_lemon.svg new file mode 100644 index 0000000000000..b060a7f8fee67 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_lemon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_pentagon.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_pentagon.svg new file mode 100644 index 0000000000000..dd44b60ff3469 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_pentagon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_pill.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_pill.svg new file mode 100644 index 0000000000000..3493f34e15905 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_pill.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_shuriken.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_shuriken.svg new file mode 100644 index 0000000000000..d45a1e4850bf3 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_shuriken.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_sonar.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_sonar.svg new file mode 100644 index 0000000000000..1ec550e7efe66 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_sonar.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_square.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_square.svg new file mode 100644 index 0000000000000..8729549559c81 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_square.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_square_1.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_square_1.svg new file mode 100644 index 0000000000000..15b178df8c011 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_square_1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_square_2.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_square_2.svg new file mode 100644 index 0000000000000..6b38d2daed37c --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_square_2.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_star.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_star.svg new file mode 100644 index 0000000000000..d6b50f504de08 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_star.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_star_16pin.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_star_16pin.svg new file mode 100644 index 0000000000000..5a3812d682773 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_star_16pin.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_star_7pin.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_star_7pin.svg new file mode 100644 index 0000000000000..fac44f0950481 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_star_7pin.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_star_8pin.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_star_8pin.svg new file mode 100644 index 0000000000000..54980041b1e35 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_star_8pin.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_tear.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_tear.svg new file mode 100644 index 0000000000000..660eb05082253 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_tear.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/geometric_round/geo_round_triangle.svg b/addons/html_builder/static/image_shapes/geometric_round/geo_round_triangle.svg new file mode 100644 index 0000000000000..73b2444b2f609 --- /dev/null +++ b/addons/html_builder/static/image_shapes/geometric_round/geo_round_triangle.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/panel/panel_duo.svg b/addons/html_builder/static/image_shapes/panel/panel_duo.svg new file mode 100644 index 0000000000000..f886ef969688a --- /dev/null +++ b/addons/html_builder/static/image_shapes/panel/panel_duo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/panel/panel_duo_r.svg b/addons/html_builder/static/image_shapes/panel/panel_duo_r.svg new file mode 100644 index 0000000000000..5deefb1cb7e2f --- /dev/null +++ b/addons/html_builder/static/image_shapes/panel/panel_duo_r.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/panel/panel_duo_step.svg b/addons/html_builder/static/image_shapes/panel/panel_duo_step.svg new file mode 100644 index 0000000000000..2ade003895fe0 --- /dev/null +++ b/addons/html_builder/static/image_shapes/panel/panel_duo_step.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/panel/panel_duo_step_pill.svg b/addons/html_builder/static/image_shapes/panel/panel_duo_step_pill.svg new file mode 100644 index 0000000000000..5f1befdaf3bf6 --- /dev/null +++ b/addons/html_builder/static/image_shapes/panel/panel_duo_step_pill.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/panel/panel_trio_in_r.svg b/addons/html_builder/static/image_shapes/panel/panel_trio_in_r.svg new file mode 100644 index 0000000000000..ac22ff3434c08 --- /dev/null +++ b/addons/html_builder/static/image_shapes/panel/panel_trio_in_r.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/panel/panel_trio_out_r.svg b/addons/html_builder/static/image_shapes/panel/panel_trio_out_r.svg new file mode 100644 index 0000000000000..0b0adb608e2fb --- /dev/null +++ b/addons/html_builder/static/image_shapes/panel/panel_trio_out_r.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/panel/panel_window.svg b/addons/html_builder/static/image_shapes/panel/panel_window.svg new file mode 100644 index 0000000000000..d762c5cb935e5 --- /dev/null +++ b/addons/html_builder/static/image_shapes/panel/panel_window.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_circuit.svg b/addons/html_builder/static/image_shapes/pattern/pattern_circuit.svg new file mode 100644 index 0000000000000..6d496261e44ae --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_circuit.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_labyrinth.svg b/addons/html_builder/static/image_shapes/pattern/pattern_labyrinth.svg new file mode 100644 index 0000000000000..8c4b18f1012ec --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_labyrinth.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_line_star.svg b/addons/html_builder/static/image_shapes/pattern/pattern_line_star.svg new file mode 100644 index 0000000000000..601779591d640 --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_line_star.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_line_sun.svg b/addons/html_builder/static/image_shapes/pattern/pattern_line_sun.svg new file mode 100644 index 0000000000000..fbe18764a85b3 --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_line_sun.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_organic_caps.svg b/addons/html_builder/static/image_shapes/pattern/pattern_organic_caps.svg new file mode 100644 index 0000000000000..9bba130409157 --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_organic_caps.svg @@ -0,0 +1,168 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_organic_cross.svg b/addons/html_builder/static/image_shapes/pattern/pattern_organic_cross.svg new file mode 100644 index 0000000000000..34c84c42cc744 --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_organic_cross.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_organic_dot.svg b/addons/html_builder/static/image_shapes/pattern/pattern_organic_dot.svg new file mode 100644 index 0000000000000..b47013db8d7e8 --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_organic_dot.svg @@ -0,0 +1,662 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_oval_zebra.svg b/addons/html_builder/static/image_shapes/pattern/pattern_oval_zebra.svg new file mode 100644 index 0000000000000..bbd572b607615 --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_oval_zebra.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_point.svg b/addons/html_builder/static/image_shapes/pattern/pattern_point.svg new file mode 100644 index 0000000000000..8d2fe37444acb --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_point.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_wave_1.svg b/addons/html_builder/static/image_shapes/pattern/pattern_wave_1.svg new file mode 100644 index 0000000000000..babae1e93b3f1 --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_wave_1.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_wave_2.svg b/addons/html_builder/static/image_shapes/pattern/pattern_wave_2.svg new file mode 100644 index 0000000000000..2c1b6c5ca7370 --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_wave_2.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_wave_3.svg b/addons/html_builder/static/image_shapes/pattern/pattern_wave_3.svg new file mode 100644 index 0000000000000..c4752773973ef --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_wave_3.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/pattern/pattern_wave_4.svg b/addons/html_builder/static/image_shapes/pattern/pattern_wave_4.svg new file mode 100644 index 0000000000000..a5fca9f1b8adb --- /dev/null +++ b/addons/html_builder/static/image_shapes/pattern/pattern_wave_4.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/solid/solid_blob_1.svg b/addons/html_builder/static/image_shapes/solid/solid_blob_1.svg new file mode 100644 index 0000000000000..170d6dc424043 --- /dev/null +++ b/addons/html_builder/static/image_shapes/solid/solid_blob_1.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/solid/solid_blob_2.svg b/addons/html_builder/static/image_shapes/solid/solid_blob_2.svg new file mode 100644 index 0000000000000..dc5fd1008d093 --- /dev/null +++ b/addons/html_builder/static/image_shapes/solid/solid_blob_2.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/solid/solid_blob_3.svg b/addons/html_builder/static/image_shapes/solid/solid_blob_3.svg new file mode 100644 index 0000000000000..c6bc3eec0cbca --- /dev/null +++ b/addons/html_builder/static/image_shapes/solid/solid_blob_3.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/solid/solid_blob_4.svg b/addons/html_builder/static/image_shapes/solid/solid_blob_4.svg new file mode 100644 index 0000000000000..6bdbacb5ce2d4 --- /dev/null +++ b/addons/html_builder/static/image_shapes/solid/solid_blob_4.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/solid/solid_blob_5.svg b/addons/html_builder/static/image_shapes/solid/solid_blob_5.svg new file mode 100644 index 0000000000000..c7b3fb9717a87 --- /dev/null +++ b/addons/html_builder/static/image_shapes/solid/solid_blob_5.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/solid/solid_blob_shadow_1.svg b/addons/html_builder/static/image_shapes/solid/solid_blob_shadow_1.svg new file mode 100644 index 0000000000000..162c24d0c786b --- /dev/null +++ b/addons/html_builder/static/image_shapes/solid/solid_blob_shadow_1.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/solid/solid_blob_shadow_2.svg b/addons/html_builder/static/image_shapes/solid/solid_blob_shadow_2.svg new file mode 100644 index 0000000000000..7bcd52ced84ad --- /dev/null +++ b/addons/html_builder/static/image_shapes/solid/solid_blob_shadow_2.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/solid/solid_square_1.svg b/addons/html_builder/static/image_shapes/solid/solid_square_1.svg new file mode 100644 index 0000000000000..2caa6b3a00b1f --- /dev/null +++ b/addons/html_builder/static/image_shapes/solid/solid_square_1.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/solid/solid_square_2.svg b/addons/html_builder/static/image_shapes/solid/solid_square_2.svg new file mode 100644 index 0000000000000..70f560fcc9fcc --- /dev/null +++ b/addons/html_builder/static/image_shapes/solid/solid_square_2.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/solid/solid_square_3.svg b/addons/html_builder/static/image_shapes/solid/solid_square_3.svg new file mode 100644 index 0000000000000..56830ce3eec0a --- /dev/null +++ b/addons/html_builder/static/image_shapes/solid/solid_square_3.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/special/special_filter.svg b/addons/html_builder/static/image_shapes/special/special_filter.svg new file mode 100644 index 0000000000000..cc2a278e624b8 --- /dev/null +++ b/addons/html_builder/static/image_shapes/special/special_filter.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/special/special_flag.svg b/addons/html_builder/static/image_shapes/special/special_flag.svg new file mode 100644 index 0000000000000..a68177553adbe --- /dev/null +++ b/addons/html_builder/static/image_shapes/special/special_flag.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/special/special_layered.svg b/addons/html_builder/static/image_shapes/special/special_layered.svg new file mode 100644 index 0000000000000..2321c7319b839 --- /dev/null +++ b/addons/html_builder/static/image_shapes/special/special_layered.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/special/special_organic.svg b/addons/html_builder/static/image_shapes/special/special_organic.svg new file mode 100644 index 0000000000000..d75bfbca0fc25 --- /dev/null +++ b/addons/html_builder/static/image_shapes/special/special_organic.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/special/special_rain.svg b/addons/html_builder/static/image_shapes/special/special_rain.svg new file mode 100644 index 0000000000000..69037ebdb9bbd --- /dev/null +++ b/addons/html_builder/static/image_shapes/special/special_rain.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/special/special_snow.svg b/addons/html_builder/static/image_shapes/special/special_snow.svg new file mode 100644 index 0000000000000..f492449992b82 --- /dev/null +++ b/addons/html_builder/static/image_shapes/special/special_snow.svg @@ -0,0 +1,316 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/image_shapes/special/special_speed.svg b/addons/html_builder/static/image_shapes/special/special_speed.svg new file mode 100644 index 0000000000000..f7ca285903d90 --- /dev/null +++ b/addons/html_builder/static/image_shapes/special/special_speed.svg @@ -0,0 +1,263 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/img/options/bg_shape.svg b/addons/html_builder/static/img/options/bg_shape.svg new file mode 100644 index 0000000000000..838ddc5320334 --- /dev/null +++ b/addons/html_builder/static/img/options/bg_shape.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/addons/html_builder/static/img/options/bring-backward.svg b/addons/html_builder/static/img/options/bring-backward.svg new file mode 100644 index 0000000000000..30cc48ac4d492 --- /dev/null +++ b/addons/html_builder/static/img/options/bring-backward.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/addons/html_builder/static/img/options/bring-forward.svg b/addons/html_builder/static/img/options/bring-forward.svg new file mode 100644 index 0000000000000..727c0154b6324 --- /dev/null +++ b/addons/html_builder/static/img/options/bring-forward.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/addons/html_builder/static/img/options/desktop_invisible.svg b/addons/html_builder/static/img/options/desktop_invisible.svg new file mode 100644 index 0000000000000..c9a407c74b34b --- /dev/null +++ b/addons/html_builder/static/img/options/desktop_invisible.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/addons/html_builder/static/img/options/mobile_invisible.svg b/addons/html_builder/static/img/options/mobile_invisible.svg new file mode 100644 index 0000000000000..ce5f3091ce816 --- /dev/null +++ b/addons/html_builder/static/img/options/mobile_invisible.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/addons/html_builder/static/img/options/pos_left.svg b/addons/html_builder/static/img/options/pos_left.svg new file mode 100644 index 0000000000000..446e392b13bc5 --- /dev/null +++ b/addons/html_builder/static/img/options/pos_left.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/addons/html_builder/static/img/options/pos_right.svg b/addons/html_builder/static/img/options/pos_right.svg new file mode 100644 index 0000000000000..8990d7cdaf27a --- /dev/null +++ b/addons/html_builder/static/img/options/pos_right.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/addons/html_builder/static/img/options/shadow_in.svg b/addons/html_builder/static/img/options/shadow_in.svg new file mode 100644 index 0000000000000..ad594384cfd16 --- /dev/null +++ b/addons/html_builder/static/img/options/shadow_in.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/addons/html_builder/static/img/options/shadow_out.svg b/addons/html_builder/static/img/options/shadow_out.svg new file mode 100644 index 0000000000000..fc967b332f139 --- /dev/null +++ b/addons/html_builder/static/img/options/shadow_out.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/addons/html_builder/static/img/options/size_large.svg b/addons/html_builder/static/img/options/size_large.svg new file mode 100644 index 0000000000000..1354178068994 --- /dev/null +++ b/addons/html_builder/static/img/options/size_large.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/addons/html_builder/static/img/options/size_medium.svg b/addons/html_builder/static/img/options/size_medium.svg new file mode 100644 index 0000000000000..00b3a3d43d0f8 --- /dev/null +++ b/addons/html_builder/static/img/options/size_medium.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/addons/html_builder/static/img/options/size_small.svg b/addons/html_builder/static/img/options/size_small.svg new file mode 100644 index 0000000000000..aaa36a673855b --- /dev/null +++ b/addons/html_builder/static/img/options/size_small.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/addons/html_builder/static/img/phone.png b/addons/html_builder/static/img/phone.png new file mode 100644 index 0000000000000000000000000000000000000000..0570c4d8fe27d837b829779dd665a6fbc89a4d5d GIT binary patch literal 20595 zcmW(+2{@GB7yf3!7~9w>G$UEZzKfa$8T*oLh-^dl?1?g%u|ygQrL5W4j4dQt8%w0c zmXalF5=Bz#|NZ`+hiBaH-us<%?t9L8&$*;pSr~C3k0Aj7;4mf_*Z=^81^_TL0tSxg zsP&fs07~2dldRgXt1|$00|u)eT9T3UG?<_fUC20_la32I~xuDH6rC9-ye&l zd(Xz_G%Nu%)t%edRbo{5JGH$em9H8+iII5uck1lzUo3GG+QA;O>TM6@;~EE6P6tfG{p5G7#@6>PvACJB)$YRi_g6jt?Pv=;cTC+$(7eGSh#j|Ug4?5< z)^tx71Xj8l^{O> z{qha(zgzw5k?$}4yV3LYq22gQaFm`mZFr@rs-bQ!>Y^4|Wv+oFM*Wxi^YfWww}%C! zxSb8czTF#CUp@Ex$y(0l*C*F6RXo5dA8xTVe6&3Awei@^;2R%{4D{x9sNb->vJ>|V zj|rm51@ETpK^%vMDQ1bM+}3|G*Z_ zc_?3wQ_w*3tkY(`@oD|2XCK;2el8dZg_LF*2}d+fNUf_bnW>JeYz8zbcK4S2ac~`| z?U>zoA86zIB0usYY3f7d+2vVQseG4&6#;Q+dB0DF{?qpR%ByaO{kS=7 z`Bv-V@D$1-Jd00NeC5%}MMG|MahHd8P1=N9=*|0q1to-n%J$Mv*oqYHo+tU1FRs7% zDi!)qIY@HgpTpdrfBf2yUL7fl`|x#GF8@8&)}1=L;b7g%L94d9H+u!$dO;{u;_UEl zO#4gn6~pa_g2%lJ+FMr-6;waR-(_y|=sms2w~=G`sO>gnzc` zh8Nv`Rg*L$*XGo^)%n4_q$aUeM2ZX20bg6IwP&5#Rs8KHc)8%w^U#Nto}5zZn(73` z^*g0+%CEgm)NWf=4l z&?bNL9v;3MK{dYWGrK%l{?r~-WS$H=AyeJ9b<8eLRFnN#Uby!mYSN^BAG00JDCoc3S$o-sMCD(h zi-w|t>gu|Zv}=Et{iR1^olWmri)QLH)}=|ZvWa>Bnj>sXE+wQmrMyvmLf8DeBxn|Z z;tE*az5Y&Jc#vb8;nyLZdgj+LBhQD}5tT)<%;R2(0IFev`v#A(q4FQ0mkkEQC?2*O zBVWCZrOwxi57o)t_k=V$b1D8T*_1k##qq^$cYSaaR=M@;kN2keX)Vvf&bL-99X+nK zt}RMXNTFZTRYF!(;%Ddj{r5Ukqw}|8Pja92eA~{m?@UNCWWz_%E4l&WMjIB zPCq!wxa?M~#Idgy30gW^VcJ`&*5##O_aVSG?#Q zKjt&HR%*VUuJ^+oMh&b63CgvW6s~@TK|e$$7OObvmNU*B4Owhzg$`F<4civtxSw`x z+%cpZSty7uejmdqxwEVo$$3rKGxLry?+Fz(;V%!$nR(57ct`R}qKtdjDIrZ$dfUPx zB42b0KUTc(;JWRd)7%}&5tr(&=YjC$yRDr^eLT7AmHbucDP|Ru*YlG7{$Q&9xeSG1 z41-A(0kEnZ$!0~cm7nQHxc3iaEMz(jr(NH69_EjJp(ljW>A7(0x9zEd7dOWm?zSTe zEdg;Ra|^UUb9#P;8lQ-x)rMQ(OC(L68b#NykSt$2+$ApZnf6}W-O$jrc;0c5uC1b0 zi*nU+_D7ZV*m+=`X66+C4wrD2-?qsz$ZOb2Attget0iSrT~ z{kWkhe&>O1=#9c35Y`09HD{Sq=nKaMl#S4RlRt{m$6eRx6?p@;KR#DF-H1pv=+(-h zbC4fzcisPuFZo&?dot`|PoQU7`atU^OZ4fx=_j8k$}@GEEMY8q_yu;?e{pFmtkoUF zeyn<6&F`eHQ>FMd?2VGt?-VafT#kXp+HWiw7JqN}nd2c>&bqtspQLFtwDt|(>XYsC zjv>|l21IC^TSOHvPq(hx@j>?E4Sla}CY~q5Im<-d?{`j+>IhmFl692?^lDiH^d`>{ z$FC`wjvU5jS3MyZzmn&skXCxTHBEAJUJ8WLU9Pdz8;8{f^HDfd|1IQK6|C3(+DMOR zw8__OR(9u23K5O?Wukk^!R=*r-~A&8QGxa?3*lj-th;GE7UdoUes()C0?(p8Jx0_jqEvD9nC$bMFU&Mz=)0BE zGSgVb(yz#p&)>gKjmN===MBZWmo98DZ6&YSTAASTwi+JU?iI|hcLZAZW#-)$eat$7 zE9Fr?4@j1Lv0#r<7~-@u+Jfy%s{8kF>oBn5f|cB)3u9ZZNko+JIb*$OC_Zj{`TpwI z1Gdsw4Ck3k?>)Do#19P=Z(ovNyKro>a{cMzJqc#y>k8R8riz8E6PYdLtxR^)iKvQA z>Ft(qBfai4nF>>6=Kf>%g9vph@3WiyTsn$Huj_ss!~)gT8tUIeU`Fb$CJsj|)`wlk z9wEb(sod_@j4H@Ddv(cYcJaBv+2X@9l%(J);I>nbQ@w1MTSFw)6?y?BPGooH>}RDr zRZja#MMdi)ni*${U!Ko7`FmpJ-m>P6YC6{sL}`gsu#InX0?OH0D>6Ltje*jQ!$E#e zrvcj8=Qkej(&kudb~wKL0gm73%yErZNnFUu^USGU?$;7$akIfV<}7R4O&A`0f7VWy zQ{4I`vW%z;y59HC|D6{{cz;jCyNdpiqcyUD*)@C-851xYnrwRWn@V1^0nW)}=tpp} z7?xed`R8@)h>>NRUA=%4+pI`+Vef4(x|)gRDQ+(}YGPNRa>4ua6AKGZhgGU~%bad` zE-D+CHVm(q&y*f_Lh-nMH#KgLSy_)0kM! z_WrQhCz8gcwHWd1-m?>F=bt{{I>Gory?EqwVNjvg%zChYm(upAMfiw%AaQ<`^v2CU zdq4b5dCz$A%jJfVVy`dlQBA{K)$K{o&lwv!l zE8@R$#n;wM7ptI>CEI*hd)eJY2=V-#MY8Xxxb^QV# zfyD08XOn+2h@~7ssWsob+S`~5e2cm~n~IL->V9Q~Jd%)tVLx_Dm&Au|df4vUgbu48l^I`s!kk18X{V_7rIo^RReZQg(v1@WCk5>H3FL*4@YDds`>ipuQYQf^zA6Csztq z&>4AVWgmi#&Ia>+h|X*pC=WCehP96z4?6yZCCCJ3EFN%0d?wKDQ>GCV6zUiF{5njZl1Y){Nghz7Ka?UN1K^1cAQ7anQV<)ty03(*gL0e^^XO+CS2D@A7{5atNJA}ZdbbO)t@b4Uq=$R1vg#I z>Ic^vIo@GS-95IUb>c$LRcYA__lr$!-#4dLD*JEz98!~&n zjP)B^Sr6Dx0IbYx4dVdd*RNl3adBQ=UO#{Sw6n8&{ra_)l~r?dvx$jGX=$mWqobvz zCHNV9R8&;7wY6nqV^dI2ke{CqjuVN*hYufubHJZpzI<_VastP}&o2M}0_Xes`c_w0 zgPWI>l;q~-PE1UAdwXBGas}LZe}BKCq5_;86ckidRR!)D5fK4Sj){pWEG!%v8fs{0 zh>wpiE-nV2CM6{`Ha4cGrAmH~CFudfG<(9zKW z>H@wOl3_v-71(m)zamL6Csh009#i7ziRHJUkqf85Hu`wQHaXpyUY& z2~;XIH8mB4K}JSKW@ct~b~Xqq@bp3OfH(m`1%d&z44qB~!SM9yQ}F1)GX;+l)c3=O z51?g03xnnbO$r_yXx@d#F8ZLJkZ>D|3jl6q8f>2d5D!x$10aP-lmPz1dWAp?0|14S z|9wNQmYt0R2U)_6%?(+W*bwYc?(RSC;370&Y;ex@>g-njCBlQ%-~ZaYh{sMoX)aa5 zpsJ3^-kkQc_UAWv>}Xi|O4fgBzi5+%+2w^sM}1;TGPO#ojD>V?LLxu!PD`s@>Uj^3 zzxw#BL^Q(wZQtV1>X)ebpWput@%ne}KP%kc4s&@^Y5Z2|r`-0>-yL6dBMYxHGyV5v zSaWT7V`O+(=k(?Sr_%({o_B`=cDz;BY;K>3ii}*0viS{*-TQj>OnAg3AHQA18E@x3 zm#*I8D80!u_wsn{_NomxbatOqJ*)c5pi1S+oe{lxRI;+eQSl;=em{+Oz}uN8+g!TI zcHjw5>_EuO@aBoBrMAQJ-DUPm0wd|vPKm;&J_C0z4V3zOM3;rUE0&9{Ex7cv+}l*G zI=b+(cvEzJ<)gIZkcCl;I+$K~Gu}RVg18lgo&UGysPle9cZYF!&1*0~Ufw)+_D#W; zO2_j*yw$RzVtX7&q_R754ilMebq8AvYDtJ@J?Ne~b_@O=s`L1&TO$({b34kd?3RW< zhgwLrAEc;9BnaNP;2*P4sJk-y?pWT>+1sLeA6r!y>Lcxs8R#99j6cyV)oD6LL za9D8L+vYRJ`3Ex2ofmB5o_$^^1HH?cf8Mp~z@|3l=QG<$z4{=RYf07J|6ct4sBrPa z_3PI!{oNI;_y0w0I5M^CPKn5FC~P=$U`+hSzwzKNj7@Z?>}P|s{B^v`vxrZk+aG${ z!n!vmyB^Gc^j+V;&L}@oSz$1CUoXC{_6@E0a`Kb(eYInov!`Y2Z~R;pjEfD~{X2i@ z`qAdC&Z+vN(7m2S7KZ_*-@ne?I2xULS9mSu_hegZtLwkdv)#4bXCB}9Rdm??J5bKS z=BGznLz@;2SaDS6&8p*FAanZ%Om4YqikyS(~sQ7azrp@)3y_9WxvR zU4A*JZH%~F2-M@(JQH`=_h!4^wPSkk$?dw)*kG#V|HDx&8b@uECurA&(kYH?}R~4*vXYk}`aAp^A|*-lijjs82q*a77C* zD{F7ods4t8%B=U!%Wv7OnbWI^TIVmGc&-i`sJ5gspJRIAk!fvXBWKVrUMuy}`nb-a zYeexH?6Gq+h-78%1M+5ecMjl^ywyD5@ z?Q*3DUPotzJunLXdvx^ZY|xzUQmc{u_4s=)m*y%}1I$0o&d&NhCtX(hqzOCx@^arQ zezrisBqaCGZ?>s`;IvCY!NHcAS$S8#mxq*uEGo4Ozqx<;ir2dnH&1J{KH$h!-rg)TSo-^WN$ZSt z`1-if?XUA257U3IoG+0azvur*;KVrJ{Hv4~@rtr99%fqzcIJs63CxG@1m@C1qqFC; zieIQm+Li?n4dZ=O#B4e1O|~ww@~C8*gi>#f`L$Gt-XE=e;nxI@m3x-*sMTFA*Reo! zzqwl~qj{*x8s7Yl&d99+%DPk3>$ zbf0FBn6KlEHlIiBdg;FY8O>n%(lcky8N&3j`*ns|wau;G+qjD+HZuM<6`OOGdwk7_ zyUM1%kxw0v>-rbf&oQ^&uGYzbCY^o9FAL;ka-p7^QcO5U^40T`VxzmvK8A(MyqYqc~k%VXsc`mGbJ~PTe>v+ldVV8rvk}F zji*{30RfSm3Y18$5zn@zPNUn;{OUx0+`lEn5^5E2Z#nahRMreO{EUEUBWr`puvr0z z@!lOJL!I+~6TdyRjgtV?OO1<{F@Bb)8%45oixz$S{15NkXkEnL1h&l}`?KF$4A2Bj zu<7{?`IDh2cbj6=d?HUiLROiWNw8u_F$)SNwqv4VCw$iQ_-=Q7JR2N0f0oZB^?2Br z$)epf>alsqF#1LM^3B_|TA!bHo)Y#~e(kSj?RK5dlCYC1BQMr=Wm)wZQoeMzDqze% zGmXn}70MRe^RG%$xK6Yt2KeuZ`RCSE9bR3y_qrdW9E>WSiF7F>n^v$ zFIw%}N*;kA#imcq4870oX_a4w8d~4S=~PYcsI%{kZT#M>=e zD!QF3$3p8lEhD<`7{&a1^Zw`Q3vvS&6#5fC5iqxLx9@1meEqh=oiy3UYBcEGIy*XK zHYmc$tp9qAs>n+>HuF4oA>;D4*h0Io4gFUivRF%*H~XoiWLbUdwlsp$zX*SQ0ty0e9Jj_i3vho1O{c@i!2rp`Bx zmN9ygckY}-8DGoVnf;J1pE>H-w^ee?n6R*c|-(FRWx*H?Wd%@M|cSIwnW2C!^(dIbj z+fw7)_6a`Z%Qd9rQs+S@c9Yq2Q*g1p69-iFd=Q?rSPKK9#d>fazpNFLu>Gv1WGRkY+d-sZY~M>-DUB3CQac5R|kSNQav+^c4ba1$5Wm(yt>{j!vIp$E3Hq~oUFNd%({l6S}!cl^Flhbu9S2Y6E^ml z?XKWTNb&mLt!_)Ek~_{zE!vM>VY4t$aloVhb#xkx6Q zJ5F&s-y16U{L|9S*oLFhQG(v>30E6!}$t8>Dmm}e3T%I)bX|r zjfaEHLl3Rg>=tPKiEFT-~D#w^cR`0+tt*1~J zLhnNYPiy$(nz7{8&H%r@{?)Q}vb)}|MeDfFMgB3pO6$k;^Gr}83582cJUq7%ls~U4 z`Nz}uU)zRfpQgDT^rbPxOA(idZ<@rGlDtj-)>tUt$dk6hL`z?3<@@ydx9G%kmc36s zD|eFxsN^cG`seWu zCh|19`HgGPZOKy!y$iLXPnW$eVI+R%-N8GuCX8O(<-B_Ws;2WApM7FnoZZ((OGzG) z9(A5+9Dhz9U4n>=M+gj=HL80WSVsF_yROldzu(bv)pqa9(bJ(qKe20X91!M{B?)cPOmKH0g%pg{Wh)v7 z`*1;ajIt#ny|=jWP)sA6%V4*b3{aZt9Ovxw)V;IH!>fX))y0tZzJT`c508BIKm8a} z3$3kEwj35IwBALUQj3Wuhd2;<0t5cID0WM@2_lbK$w&|QsW)&HctTdcN>SFX#4xmp1Mi0@>t5{NDM8O-f*EkaR;K{UZ>N(z)}>Qb_%H8`VaIx!;ihO z_lyV{Yts|EP#_fk=d0jWm~+0=a0n$p>lS{>bf5Rpz`k`wr*&;AYhV1k=|4mM&ex9T z6$H%%1&uan9-Or^m$tk!Qp5bCl{BqlR`l=NgJR6~#H|yyL7MGza}t-{?MxkG|LW&6 zsK&dv|LWUEMJ_L_=lF^SPuiH?9r4N2HGlt9sf5;kf9vYmcOWqny^3YqAuJzT7{7bQ zLiizfkb|m7YNqI*i9}|4m}kIH?Az>hn&tXb_x5q&80W|@4@D3km()AmMbCO`dxoMJ zO}b(gBm5!(?`6(lI^Q=Iel2t^cxDw5`}0$R$fc_QC+VkAkH ze@E1RZr5sG`&eKHG-|o;oG~YT+ZR9fu1P4RPfNYMQD93}G24Pw=lk+^o^6BiC2_dd zoXZHr7gHHW z+D-rqOX=7xRS6dk|9#&P3^3#srqCAiE^?i6Z$>nxJE}G#Dgupuqf1kEY_z=CDFY!4 zu7}<>>dWm+m&cdq{N)JF8OZX&FdR}N<(BJvzoo1p{u_hSY*#B7W!{Lv$D7O zn6iS0mkLa7zR7J=I|BMTO~EK6N2i0HTb&E zyw|Dk!0sU!ReDef7EuAwR03|$MJ}oHbMO3mHRTLpcnM+!Zt2AHtK4jhk$Uj~vN~SZyD9Rr>rzra3`!fi#p)<$ za$5Qk56!AI?h>$DUe;UKX-0n9gN!Fs@NW{?`{Vzm=5;t8j(qfmFa{pf9G4fT%{D!@ z4fkW=5*MNEQ1*sJG5V50_O%uTIefc9IX5k`k87jrXJ3Yd9WI(f2z|K@_8)j?=8iHZ z5s{;pM?I)$^w4PjP0^lVStolH(~hd zY5{zCcS8#j%1KrNRLYrETqoFYLXaVEQ4!SUJ$8mU1mP$^LeE%pr+l}dz9Ok#(&7)$ z?HZ>ZY5~PnDDIRH`p^5{ZhH#YnH%LP7J~jlwz5mPO!SO!;i^Y&DM6sZy>P-{rdUm6 z`-}W&+upwG&jRCwcfyC*$-xIpkCB|Gb=V11feRy z66F2Em;T%yKd5Pw?XYj7yfnP`))yvo3TJZ5rGgsw&Fj0(wjb<9{Dw5(&fFjLg~u}V zQ#>vSKmolz3@h_!^uiW<4JKNz9LP)6aJme6ain45@MeL8vS7L#`)^B+GB{PxBALZdbNw6H^Z0^@rl~ znP}lU`6eXUFaRAz&LrY#@F8o}?xyP!tNy)}% zQRANzrS8`7$Vsd(ki!edHt9IbU4JvUO^rHopPv1WVLF_4*0wrtoQmbU%&ug-!w&kelk=GDZj17!oF2+#SYRl~) z%>+i{m?af^-54gAGW!ymj5f`6dW*!`?;VD~CBe~}A(eeWimK>GV=}qD^mi^ z++b+E#}M5Xhkh#qZFE+q)k>o7={o|ABk|Jm{wG>3gdB6!Nh7e=a(v&l(Qrf6v zkO}iL{T`^IFin>luwX1ooIH?p6u6GgMpA!R>~mhpp{l~kN^MxE7n@`RbM^r4CO68b zMUwXD70H^#Lq+ht>Ukf9%&iUumV~zXaWNLE(qn8X>QN59;H?7$<&7MI;rXD6myt$3_bg@8#l7*@_}K#6Qzwn_fr zx{)&gOEtwEDAc6A*MXqJ`8`bgxoOH!gM$-uY45jR^w1pvWmep>aBp`xC$gAb;y%~% zjqdn>{D)FGOvqvm2?YoyCt`QGYy}deM9~I8L(jHI14{n|t`dv4^pH4d@MewbXqJ&a z;XCvVH>Mr)Tj6^Q(T&&~KdnUbItJmE_kS_{9*^}up+bS6jzc}<>|pCl9korbNR1GW zaiJFmBRugmV^O|d1B}?xbh-(~`OhS)G(`oaYL9?=$N+FY{P7efNC=urCap6u(qC4? zRnRaf(jDF}4SOx+C~#kYt_7ed(C!ICs%&B0mZ1O|%a^4-*i06gr?P|K7?q&_?Uk7r z0(iXqG`VAeiqZy(xS}nRwOCX8)${P(I$&8vnj%VrL$V-f9jMJi*_SNPhU7JNL*tCcpMH43Vc!?6N!A#7$Q4a0_0^7+!{ni z5|;T118;;I^;v!o&&~MkB1y~G_5wR;Js11Ok zLnHKhpTY&*e7~K0Y6OaYs|tr1$A}X!s}!pfG-m|EqER%iUqn$;s@L>+QTJyQorNA+QpOBSrC3P z+x$ahvlQh2Ll1{I+K< zg+QtjsU@8K6mmElPWB^%9AE)Ob>Q#@n90ZNgh!)vtE4CH#g&l8eor_-#STFb1&WdV zHi(pBY8w{l1qjM4%LdQzSKhO^2-u-Fqj6{YaIIi)(*{9?vt?Rd3}=(3D5D;*!nF14 z|BRRA=eT0@*=ZOxIVu^>O7kKByDzroKbwFVa2O{ppiSF+vFY6K9XIT* zD3SM-Xf042#aNX5%8u}y3m48TQOjCd#xjm^BZkY%*$btpC4=khvKnFhHgII|#a0-0 zQw^BNCM|q$W$)(*L%5*1;SxF08mq8#i5O|hjU*I$hoXHin0Q;8imSZfKzLgMF+l7& zSs@0jq;Pn6iV-x_XnLd<2|+iGV z_c8=siaCFsT-Sdrp^z5e50hM`#dE zhA;>W2AbL995S<|3x?WYk3T@sgqdh>V7;yaP^hyMmQUqTbFHg8DF0)CE^u?utGHl& z%^yO24COhWLydRrZ~b}8w<7%l0vQ4HitA6}xj7NPE;W3;6?pd&GgavV0ReN}xt4{cDS9*%geSuTeRN8fwjSjEJ0G}Dp?bg! znz6#P5Gw>PT3H>8brIz#VVVqp=VlyYz&9va5du&U?P@TDfk1sO%i;xxXiK(qp*Cu< zY!G2~G`eQ}nU5|_5t4F-{Np=L7654n<`jyQ1cI=E2g5{Dodwfy6>LF%lOhRHrkgos zwkgL5+|6C-eDnSOT9-r*#*E&G0zEYJ~nop+{IEB0MBxQSoHZXCTh5_(Voab<{RPvQD1~V9Oy{vc< z$i3EL9RNQ=|Ko^(Y$??I2OyRIF3vI)O!F~5|4$Lji!X3$DsX&0H?1cD*V;q>0fReF zzLErri303iL}2&UAn0jpvJxmET@*ppQ6Lb_;)7`J3ip?MtRW5gC3ym2Pv9iKVxnV5 zF@7T(%Xm?;6?+6me^QzDFK5+q1GN!=zwY8`!!qLGPGpf@hKjLky4(0vpl(^sGmm)O z!<=QsCG~529mnTqlBm}2<)FSF1>>KK^p7C02mPqTr8&e3TZ)xN3%%n@o`Ly8}Tmx;*>q( zOan?mzuc|Z5u^&G8*A<7tq>=vaQ>WA&~wNk2&zL^9B5pDEP#ca611d@ruP`DN7eBG z)q&8?SztC4Hl;y-!`1*a&mu5P$0p7ShdyMBxTn7c5f%ZD%H!oYZ3(1fu#$;=d(pl` z4B%dhih+P}^b23siH#zZBrbLqX9Xs10i1noY^5Bwrhy;t;sAO!1aX(0@lb@pYnb%h zjUdWESTkTV#++fOjcfE;v3qa#m<{S_evZ=2IaHP9o}F0q9U6vRb@^%m2^5=OSY(GA z?Qei#0wsTCnCg~`Govh@*s4k+l zza{e^qFHl+|8go^#_Llq6eMuz_#+>~Bz7`MnIi&jK(A$^VX*T4W15Q&P+z{T&*P3BXnU>|liR}F1Kqhh087yfkQ6K5Gvgn6+znc6a z6tnQ6gT;n8O%tHFSNb~&0Pa4-Q1qh6Zn*{vF1(1wc^_Xi@|uMfB8C{nuc9A6&bjQSJDR&K~+bm@!EA z>QE}lU(9gtO;5jdc#2?DtLPIdqq;xqi%Ldlxa1%iS}btB-hR3*a%M2+9aVDAMWw3G zjRE#~*%$tcJvEPQFcn2x?~IdbIaeS(IT5jf8iK;a$)a-nY}A!p5`5$}7b<{w-YP|m zOq|)z=mhoG@yzFUAv01#w^$J0wsk#G=Lj_oe%WQP;=JOX9#?LVA91m&9%x_h%RI* zPHpTWh25Q1!V(kVvggB%5_A;kW6y-mEUWZ?u7!_yJVH4akn&IEFyZbIbC8I$pjh6x zuQ|(YT?%XTA1YN*nh?}v7~_5{SS^h5c^rQt2VLh|MXk|=pqW@x&VB^Wkyg=7u#F(N2Lgg35Kp~mb?vR4mXsJY98dN)Eb4JQjh+|l+T ze%zl7SDZ3Nf+LJ5wk01&*?^vke?R*UCguI#sRVa2UMGnw_x(Ws3ds$Pz~46ShD z7x@~(}(i+0+x*rKSlS#F*lQ+04eo+ z9>9nP+{=oMaNG-V68+4s3~zBIjBs3<5}Cvx-}|pC^U3%_Er}?U0t4aoZFrcD+K{D! zbP6h-)R9E$abwW84OT~!=N^7`E-F|9+`=af_RuTsuY6S! z&Z1IFo<^uRSYc?GLmLD|=Q{dh0#1w#MD68BB4E%RxZPlfMCVIc<$i{vf5cz?Wz}6= z47To+-gXP{huXrS#bc6rSjM+pw$8i7{gGK zId*eDvw0A0?OJ&4sr)T+2fwsv~7M`mGQ=JBdR(db!SfnX~&Me_uL(h)TKasP;< z2~1>?TEak^{df)L$0Qt57S5FvF@|mK(m_N(7?Gl*m_vw7WJw*j92{$^h#PA*Pb96E zZ)LB5ii@QvRas7*%Pl)OvKUXshpP*fu{GZcJq~XUxK;OLw82`9#_oxnh z6B4|wn|uA=e8B6@3HGKU)J^`YEHqz``H>K;dtkX~nWPq!fOmAVzYmmNv`RS+#y*u2 z=0yRJW+^w;LUC7;N`aIcAh1NqVE?w{eXHgPh9uxFxba~YXJQT(Xt)gkaUGq;;zN*W z?&`Rw-~V5OsAOdK79V?rRmz!G3jpz+T^nqMrYNZNAAyx|9cdstu%VM>1(lTZc?1Tw zuyyr!$qy5>!Tw%wkMWT%^P(8YE0O)1@_ZY2^iUh=d?g?DJH~mzI%yV{bcz~VF|iLt z&E}}r3U7cY%f}mx9Gb)FQ06G6~_2Q_v}8Eo(#xlF)m|%j(SaFh&6b14X zWKWJAEAAdJ!5QH}j0F2r$vTa-8FWv;z!IkgCV^{fbU4^^&&E=zuUS!6DXz@=KuJTZ z15||-7Y-}c2RstlCx%LI1pMRxCNN+W$|r)XKVEN6g|am5|% zvIvBwFw-KT5==P9fc(qQnfsMY)U`f31gngS z@b|WK$*6*rpuB%O4d3c#^u`|O?WKR4GG)cn~z@{<}t*z=UocA1~Wqz8hWXY=3W2a6IJlW_Y{o{L4bu5 z%{s6*Y{nf3`dgJB;J9g^k%7N%G`A(%^54};QZAAxP(j0jeJBI&jc$L+wLzqCZ~2Ig zv%P#FrU-Q&DLmNSPuj%Xjf)jj(SHe2PeV{k=B~~Ft>~qEI^HOTWT{wnObqXv#!E4KJ48B zzAP*=)rwi=A}R$!BJf~MrEp_NFk{>U?#o;TqrWDO9g)I8CWG}E%W|Cn7+fE*MojOhjYS9kcY5FciJjx{ zf{~Tr^pgMj0@);fD+DA9H1&vLOBYpM4icyc7QQlY2!y)UPoGV4Q+g|kvP6QxGAAOz z0Rc>;;V(k=>{Vvz4(dN+H5FN7>t8PNoq@0tK{cy zl`u3fK3APnxa2rGwzAKS&~mpS`Ol0j;F|9P%sq~wy|6R zg;k+EBklMo$jWbqu-Y*AC^~E-y|}0J*0#o9@(>jc(DQeyS80PQ*BWZR^MTpA_cgu0 zn`=fO-i_K1-o;osz=RjcYLgIDxw8})d>TpG09aR>Mx^a%r$E25oO1kj5IMkYmCe0zl|lRv{o&0EBsl%qW562#{PF zGK9e#A^@q+15ync!Yo7N3Yo@0@L)Iv3SpKZGkq$B5FpU@GE;~}00K&qu76l;1y%Lb^Co9CV00=`MrWWykPP{wRHR9|%&MRcb3=2i8 zMkLGf+OLa1_L>I*qGcrj2)$aC0r6asfDH9Uj3N*V0HIc1@vIZyvhk(}q^+?fVXWZ? z!$jNy3q`AjhlTU9e9O*zB9QW}({@i433Uew^_UA*icV#ghJ{e~&E@)k7tVffA8#?* z&yv9q1Bp6espwQ(0D=^<;`-_L4*vR6lcy(bB}aw5tcVAeidLpe3h`}T`@M(1zRK0| z#!`MtR7eb#icT#piJ`tSIPu%>=lSc)oGoqPT@gquXoR(*QPD*S$XsCOi{GB`H`G`5 zRs|YMBp^{(EE+Ypw6r8-$a47j!)yEe4Xwtm)}R3csV0^c@;hL)C`9_A2xQLZjdec# z=`w#ySFWRbW&^(-GDQ>;T3d(Z`t;?K0~t0CJiS!G-*RQ6>PmXFo&1d<8VqCMH6Kjt zpS)rVi%U}5>vjD2L&XFBre6$g-?-v!xXy5+lCr` zeiLZMKr$u-Bpg^>9)uP9wB?;$SX>lC-Ro<w=%-T5q$7ix8GXXL;JO^v` zDQoT3>;jh|3mC{!p!1L4u8X&xH{NWCW$`~ggMmZ|ki}(KwNF?6SFZ$xU?6i#=8HdE zyD8q>?>zFr6Wc{VMtOxS4=*lwVckAe4ZeIy6oOCfU051k_73MB{P5!~@%F0?d)MBq z8JZ0n#*{h11DSob1S|K68s3*25KbWo$dd2e-=BXeyT=Ll-3#l+9mB?$l>;(|fxLPJ zw)H7?OqS+(AgIe)Tv%B0dY7U{e)#jc>^|MjTlXA^#;sassVy-R5rDjWwE*k)v1{q& zya;3%Ei(c#yfoVX=+_q6o$k~fxv?FreKYCAXE{W8%X)>s50HG+3cQ}57l9y&EFd7m zODog=`Qg$<`Tg4W?jMP#8{AHZt=J+dgw*UXtmDV2p!e1MyaLGL>}#Zu#YorFKTa#| zT0j2a>Qvb6&Uuo>@n{eOS(xR4pnAP9yfBOF^}A|z;q@VFVL|+93*_xJx`Mnd$bXLT zadB~$e6@h@^Llo1k=${15q*thkAB)Bz7{>m#l;2gX8gAB8eg$EOD?^0+(-PWf7!RP z?4KLO1s zcYgiG8FE!;t!NNgA6)S+Exc9&Q6S-%U?|W3`TrBm$Kopy(Ezf5=0k*KwEy<+7ghFl z+V$=Is+g^M)M`uM?cT!x!8Al1fJGC?3r!&NJP?%A$X0!)PX6$-8pvmDZGZl_v2HY4 zN#Bcsh^emRAyWwXmBIzoJAlmRDFg}R)xzvz=9@=fT+izOx@w<&UT?D)ONBNI19??Q zATlB%6YWW#^<84Zr`qk2KhdXX3F0OUX* z^C}{^%S1d-`?zuU_Q}&4O>&pJ;^7rzAZaR2h^ekbqM0GmF9!hckO;qgLWH0$7On5= znZAdQ{@bE8wv_MvcE8LPv=t|2!fUI`Bt+yuG&1BlFAackKo>14L=FTADoWbW9X zxBu4U@!9pwzK3^rV!=cr9tn=%N#r%r$g4t@C3L*cq4zz6MCK*SA_94hgXHC6?O%@` z-s{z#?CTBxecHbnT#LtJp+O%3pCh{!@+R{v-Xi~s8}BOeYGJ@4yTZtR{-U;5$E zFI@$;TAuBe|MvZ9*P4GOhWacrtk1rFok!$_HW9Jul1(P>BJ@9GSuf-~P?qC0oqrYY z{{Hq?-32$lt{5(S@kN)@?~g@;NFsQ%es)$)B!5;vWc{P$_B_7_co(YwlLM%RKwb(w z<`Iuz)1SBhGjP4|cH|TH>F-bWj13M(!+{ahXe}<1EkJp;%Uw%?^5VmHd)~Q$^pEU* z{Dq8-o^`0M2Q7sX2Z~usTd@l7LY=FFw@jz>dzI+*~`TO=CS6UC=vOn5z>FLQnS7h$4AaU}k@3@yGOB`26{c7j#*PJ-X^zh2Cgbmc--5{Oefj{YNM7yo1MQKb24P zKm6mOAvU+VHsV`ZCg;nGB2i@t*HlY%4vpx2igUyl(snklzmHG#ADM%S#`pXq0ugx3 zzj!{s;OIX2^#19pcfP9Czh}7l`NRK~TUX~+R}m3WBnl!jCfdb6B}n)E;?vc0F3R}J zk1Q%-Nk4oeLX*eK`R6ZQ4v*h^`2CIjqKof-o$<$G?(UP1zHY6KF3Xd&i5Vn%%^mFNE)*t-b= z;d#8ocJ=a=ceMVm`!}9-4!u46=@BiB8?C=Se0aB`F1h9%_6n{g+19I=eHgnh$H{NMUunTV&Jywa?fAF1YF&dYSh1r|BQZ2nW%zZ4&j^@S|X`3Lgq^T+6)`cnbXMdihaHasuHR^18?D;;=un*Zs}i{_Y|}%~iZ3YDzr&y*T`o6XiT+<~Ez#Pn8e3v+?4| z_Uj*f?qfyIw8K7mwCmDWpFjNm?`z*&I{oBvNqKXlVR8di?c}6eU7ND1tJ~ZhFI1b( zF(+THy74-p@ORa19#n44nv_*7I59bV3^E}rsC`VfGyX2NGy6UQz=C19)}2$O`Z8pYK7{L8=wiTU<@`WVy?P z)joCf=rOXsZD?iBo!i|(tBY%ByAjtLQd?VF4WtZQaoXo4?yhxB<($S$I%SSW0)a@X zwypE}M>}u(V%G_SF&U2pgX`gFES@MfCrwssX&Nch;mKr1M@I#TS2_<@Q)e%<9_i>f zf-cWYV*ki@l*5&1JJr?5d8AVQx-q^)D>9Bsl_f=t$$<-5lHF>>MwCn@Z8ozRy%(cO zpo%NYVwthb;EKiYJ6};;k??vj7z{-dDUZ`oUf=c6Po}@u^|s{PP~C&9E zz1@@&%gVir-@{!)G5|lC_)KU$6vKxZkIzJ-czwCWUJnQSYv>6{);t*W4+bL~fDroJ zADM~AxyOeI+D!J0F}GpZIaa@a{pu(ED~Hp)ednJb$zNzi)>@AWnQK{DC;G@$CtBpP z&capJSyNM1_PB>Pk*@A8;X4agC;p+_H+R+?dJCwnrk*d90ZnhkYUSRsUA1ywx1ysb zZ|GsvaNm5q43)4ueg<1v3HSNlS^UK={}<)>^E2G%yEUBW)!^?$Kd7~*>kj-;%>VKF Ye;8eW-F&+wx&QzG07*qoM6N<$f`wet-v9sr literal 0 HcmV?d00001 diff --git a/addons/html_builder/static/img/snippet_disabled.svg b/addons/html_builder/static/img/snippet_disabled.svg new file mode 100644 index 0000000000000..1d5066890f635 --- /dev/null +++ b/addons/html_builder/static/img/snippet_disabled.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/addons/html_builder/static/src/bootstrap_overriden.scss b/addons/html_builder/static/src/bootstrap_overriden.scss new file mode 100644 index 0000000000000..3264d215aa741 --- /dev/null +++ b/addons/html_builder/static/src/bootstrap_overriden.scss @@ -0,0 +1,96 @@ + +// Prefix for :root CSS variables +$variable-prefix: '' !default; + +// Automatically update bootstrap colors map (unused by BS itself) +$colors: () !default; +@each $name, $color in $o-color-palette { + $colors: map-merge(('#{$name}': o-color($color)), $colors); +} + +$o-btn-bg-colors: () !default; +$o-btn-border-colors: () !default; +@if not (variable-exists('prevent-backend-colors-alteration') and $prevent-backend-colors-alteration) { + $o-btn-bg-colors: map-merge(( + 'primary': o-color('o-cc1-btn-primary'), + 'secondary': o-color('o-cc1-btn-secondary'), + ), $o-btn-bg-colors); + $o-btn-border-colors: map-merge(( + 'primary': o-color('o-cc1-btn-primary-border'), + 'secondary': o-color('o-cc1-btn-secondary-border'), + ), $o-btn-border-colors); +} + +// Automatically extend bootstrap to create theme background/text/button classes +$theme-colors: () !default; +@each $name, $color in $o-theme-color-palette { + $theme-colors: map-merge(('#{$name}': o-color($color)), $theme-colors); +} + +// Automatically extend bootstrap gray palette (the theme palette is supposed to +// at least declare white and black) +$grays: () !default; +@each $name, $color in $o-gray-color-palette { + $grays: map-merge(('#{$name}': o-color($color)), $grays); +} + +// Detach colors that are used for backend UI (see comment linked to the +// prevent-backend-colors-alteration for more information) +@if variable-exists('prevent-backend-colors-alteration') and $prevent-backend-colors-alteration { + $theme-colors: map-remove($theme-colors, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'); + $grays: map-remove($grays, '100', '200', '300', '400', '500', '600', '700', '800', '900', 'black', 'white'); +} + +// Bootstrap use standard variables to define individual colors which are then +// placed into a map which is then used to get the value of each individual +// color. As BS4 allows to extend the map a priori to define our own colors, +// it does not take care of making the standard variables match the values in +// the user's map. The problem is that, at least for grays, bootstrap uses the +// standard variables in its _variables.scss file, so if: +// +// User file: +// $grays: ( +// '100': blue, +// ); +// +// BS4: +// $gray-100: gray !default; +// $grays: () !default; +// $grays: map-merge(( +// '100': $gray-100, +// ), $grays); +// +// -> Here map-get($grays, '100') is blue but $gray-100 is still gray... so BS4 is not +// correctly generated as BS4 uses $gray-100 in _variables.scss +$primary: map-get($theme-colors, 'primary') !default; +$secondary: map-get($theme-colors, 'secondary') !default; +$success: map-get($theme-colors, 'success') !default; +$info: map-get($theme-colors, 'info') !default; +$warning: map-get($theme-colors, 'warning') !default; +$danger: map-get($theme-colors, 'danger') !default; +$light: map-get($theme-colors, 'light') !default; +$dark: map-get($theme-colors, 'dark') !default; + +$white: map-get($grays, 'white') !default; +$gray-100: map-get($grays, '100') !default; +$gray-200: map-get($grays, '200') !default; +$gray-300: map-get($grays, '300') !default; +$gray-400: map-get($grays, '400') !default; +$gray-500: map-get($grays, '500') !default; +$gray-600: map-get($grays, '600') !default; +$gray-700: map-get($grays, '700') !default; +$gray-800: map-get($grays, '800') !default; +$gray-900: map-get($grays, '900') !default; +$black: map-get($grays, 'black') !default; + +$o-color-system-initialized: true; + +// This was added by compatibility but it actually became a nice behavior: the +// bootstrap default "small" behavior will use the ratio of the configured base +// font size (if configured, e.g. with website settings) and the Odoo own's +// "small" font size. Grep: SMALLER_FONT_SIZE_RATIO. +$small-font-size: if( + variable-exists('font-size-base'), + ($o-small-font-size / $font-size-base) * 1em, + null +) !default; diff --git a/addons/html_builder/static/src/builder.js b/addons/html_builder/static/src/builder.js new file mode 100644 index 0000000000000..1048d2ff8b851 --- /dev/null +++ b/addons/html_builder/static/src/builder.js @@ -0,0 +1,301 @@ +import { Editor } from "@html_editor/editor"; +import { MAIN_PLUGINS } from "@html_editor/plugin_sets"; +import { closestElement } from "@html_editor/utils/dom_traversal"; +import { + Component, + EventBus, + onMounted, + onWillDestroy, + onWillStart, + onWillUpdateProps, + useRef, + useState, + useSubEnv, +} from "@odoo/owl"; +import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog"; +import { useHotkey } from "@web/core/hotkeys/hotkey_hook"; +import { _t } from "@web/core/l10n/translation"; +import { registry } from "@web/core/registry"; +import { useService } from "@web/core/utils/hooks"; +import { addLoadingEffect as addButtonLoadingEffect } from "@web/core/utils/ui"; +import { useSetupAction } from "@web/search/action_hook"; +import { InvisibleElementsPanel } from "./sidebar/invisible_elements_panel"; +import { BlockTab } from "./sidebar/block_tab"; +import { CustomizeTab } from "./sidebar/customize_tab"; +import { ThemeTab } from "@html_builder/website_builder/plugins/theme/theme_tab"; +import { CORE_PLUGINS } from "./core/core_plugins"; +import { EDITOR_COLOR_CSS_VARIABLES, getCSSVariableValue } from "./utils/utils_css"; + +export class Builder extends Component { + static template = "html_builder.Builder"; + static components = { BlockTab, CustomizeTab, InvisibleElementsPanel, ThemeTab }; + static props = { + closeEditor: { type: Function }, + reloadEditor: { type: Function, optional: true }, + snippetsName: { type: String }, + toggleMobile: { type: Function }, + overlayRef: { type: Function }, + isTranslation: { type: Boolean }, + iframeLoaded: { type: Object }, + isMobile: { type: Boolean }, + Plugins: { type: Array, optional: true }, + config: { type: Object, optional: true }, + }; + + setup() { + // const actionService = useService("action"); + this.builder_sidebarRef = useRef("builder_sidebar"); + this.state = useState({ + canUndo: false, + canRedo: false, + activeTab: this.props.isTranslation ? "customize" : "blocks", + currentOptionsContainers: undefined, + invisibleEls: [], + }); + useHotkey("control+z", () => this.undo()); + useHotkey("control+y", () => this.redo()); + useHotkey("control+shift+z", () => this.redo()); + this.orm = useService("orm"); + this.dialog = useService("dialog"); + this.ui = useService("ui"); + this.notification = useService("notification"); + + const editorBus = new EventBus(); + + const mainPlugins = removePlugins( + [...MAIN_PLUGINS], + ["PowerButtonsPlugin", "DoubleClickImagePreviewPlugin", "SeparatorPlugin", "StarPlugin", "BannerPlugin"] + ); + const Plugins = [...mainPlugins, ...CORE_PLUGINS, ...(this.props.Plugins || [])]; + // TODO: maybe do a different config for the translate mode and the + // "regular" mode. + this.editor = new Editor( + { + Plugins, + isTranslation: this.props.isTranslation, + ...this.props.config, + onChange: ({ isPreviewing }) => { + if (!isPreviewing) { + this.state.canUndo = this.editor.shared.history.canUndo(); + this.state.canRedo = this.editor.shared.history.canRedo(); + this.updateInvisibleEls(); + editorBus.trigger("UPDATE_EDITING_ELEMENT"); + editorBus.trigger("DOM_UPDATED"); + } + }, + reloadEditor: this.props.reloadEditor, + resources: { + trigger_dom_updated: () => { + editorBus.trigger("DOM_UPDATED"); + }, + on_mobile_preview_clicked: () => { + editorBus.trigger("DOM_UPDATED"); + }, + change_current_options_containers_listeners: (currentOptionsContainers) => { + this.state.currentOptionsContainers = currentOptionsContainers; + if (!currentOptionsContainers.length) { + // If there is no option, fallback on the current + // fallback tab. + this.setTab(this.noSelectionTab); + return; + } + this.setTab("customize"); + }, + unsplittable_node_predicates: (/** @type {Node} */ node) => + node.querySelector?.("[data-oe-translation-source-sha]"), + can_display_toolbar: (namespace) => !["image", "icon"].includes(namespace), + + // disable the toolbar for images and icons + }, + getRecordInfo: (editableEl) => { + if (!editableEl) { + editableEl = closestElement( + this.editor.shared.selection.getEditableSelection().anchorNode + ); + } + return { + resModel: editableEl.dataset["oeModel"], + resId: editableEl.dataset["oeId"], + field: editableEl.dataset["oeField"], + type: editableEl.dataset["oeType"], + }; + }, + localOverlayContainers: { + key: this.env.localOverlayContainerKey, + ref: this.props.overlayRef, + }, + replaceSnippet: async (snippet) => await this.snippetModel.replaceSnippet(snippet), + saveSnippet: (snippetEl, cleanForSaveHandlers) => + this.snippetModel.saveSnippet(snippetEl, cleanForSaveHandlers), + getShared: () => this.editor.shared, + updateInvisibleElementsPanel: () => this.updateInvisibleEls(), + }, + this.env.services + ); + + this.snippetModel = useState(useService("html_builder.snippets")); + + onWillStart(async () => { + await this.snippetModel.load(); + // Ensure that the iframe is loaded and the editor is created before + // instantiating the sub components that potentially need the + // editor. + const iframeEl = await this.props.iframeLoaded; + this.editor.attachTo(iframeEl.contentDocument.body.querySelector("#wrapwrap")); + }); + + useSubEnv({ + editor: this.editor, + editorBus, + }); + // onMounted(() => { + // // actionService.setActionMode("fullscreen"); + // }); + onWillDestroy(() => { + this.editor.destroy(); + // actionService.setActionMode("current"); + }); + + useSetupAction({ + beforeUnload: (ev) => this.onBeforeUnload(ev), + beforeLeave: () => this.onBeforeLeave(), + }); + + onMounted(() => { + this.editor.document.body.classList.add("editor_enable"); + this.setCSSVariables(); + // TODO: onload editor + this.updateInvisibleEls(); + }); + onWillUpdateProps((nextProps) => { + if (nextProps.isMobile !== this.props.isMobile) { + this.updateInvisibleEls(nextProps.isMobile); + } + }); + // Fallback tab when no option is active. + this.noSelectionTab = "blocks"; + } + + setCSSVariables() { + const el = this.builder_sidebarRef.el; + for (const style of EDITOR_COLOR_CSS_VARIABLES) { + let value = getCSSVariableValue(style); + if (value.startsWith("'") && value.endsWith("'")) { + // Gradient values are recovered within a string. + value = value.substring(1, value.length - 1); + } + el.style.setProperty(`--we-cp-${style}`, value); + } + } + + discard() { + if (this.state.canUndo) { + this.dialog.add(ConfirmationDialog, { + body: _t( + "If you discard the current edits, all unsaved changes will be lost. You can cancel to return to edit mode." + ), + confirm: () => this.props.closeEditor(), + cancel: () => {}, + }); + } else { + this.props.closeEditor(); + } + } + + getInvisibleSelector(isMobile = this.props.isMobile) { + return `.o_snippet_invisible, ${ + isMobile ? ".o_snippet_mobile_invisible" : ".o_snippet_desktop_invisible" + }`; + } + + async save() { + this.isSaving = true; + // TODO: handle the urgent save and the fail of the save operation + const snippetMenuEl = this.builder_sidebarRef.el; + // Add a loading effect on the save button and disable the other actions + addButtonLoadingEffect(snippetMenuEl.querySelector("[data-action='save']")); + const actionButtonEls = snippetMenuEl.querySelectorAll("[data-action]"); + for (const actionButtonEl of actionButtonEls) { + actionButtonEl.disabled = true; + } + await this.editor.shared.savePlugin.save(this.props.isTranslation); + this.props.closeEditor(); + } + + /** + * Called when clicking on a tab. Sets the active tab to the given tab. + * + * @param {String} tab the tab to set + */ + onTabClick(tab) { + this.setTab(tab); + // Deactivate the options when clicking on the "BLOCKS" or "THEME" tabs. + if (tab === "theme" || tab === "blocks") { + this.editor.shared["builder-options"].deactivateContainers(); + } + } + + setTab(tab) { + this.state.activeTab = tab; + // Set the fallback tab on the "THEME" tab if it was selected. + this.noSelectionTab = tab === "theme" ? "theme" : "blocks"; + } + + undo() { + this.editor.shared.history.undo(); + } + + redo() { + this.editor.shared.history.redo(); + } + + onBeforeUnload(event) { + if (!this.isSaving && this.state.canUndo) { + event.preventDefault(); + event.returnValue = "Unsaved changes"; + } + } + + async onBeforeLeave() { + if (this.state.canUndo) { + let continueProcess = true; + await new Promise((resolve) => { + this.dialog.add(ConfirmationDialog, { + body: _t("If you proceed, your changes will be lost"), + confirmLabel: _t("Continue"), + confirm: () => resolve(), + cancel: () => { + continueProcess = false; + resolve(); + }, + }); + }); + return continueProcess; + } + return true; + } + + onMobilePreviewClick() { + this.props.toggleMobile(); + this.editor.resources["on_mobile_preview_clicked"].forEach((handler) => handler()); + } + + updateInvisibleEls(isMobile = this.props.isMobile) { + this.state.invisibleEls = [ + ...this.editor.editable.querySelectorAll(this.getInvisibleSelector(isMobile)), + ]; + } +} + +/** + * Removes the specified plugins from a given list of plugins. + * + * @param {Array} plugins the list of plugins + * @param {Array} pluginsToRemove the names of the plugins to remove + * @returns {Array} + */ +function removePlugins(plugins, pluginsToRemove) { + return plugins.filter((p) => !pluginsToRemove.includes(p.name)); +} + +registry.category("lazy_components").add("website.Builder", Builder); diff --git a/addons/html_builder/static/src/builder.scss b/addons/html_builder/static/src/builder.scss new file mode 100644 index 0000000000000..9e762a6cba866 --- /dev/null +++ b/addons/html_builder/static/src/builder.scss @@ -0,0 +1,221 @@ +.o-snippets-menu { + background-color: $o-we-bg-darker; + color: #d9d9d9; + width: 288px; +} + +.o-snippets-top-actions { + border-bottom: 1px solid $o-we-bg-lighter; + height: 46px; + + .btn { + border: none; + border-radius: 0; + padding: 0.375rem 0.75rem; + font-size: $o-we-font-size; + font-weight: 400; + line-height: 1; + + &:not(.fa) { + font-family: $o-we-font-family; + } + &.btn-primary { + @include button-variant($o-brand-primary, $o-brand-primary); + } + &.btn-secondary { + @include button-variant($o-we-sidebar-tabs-bg, $o-we-sidebar-tabs-bg); + } + &:focus, &:active, &:focus:active { + outline: none; + box-shadow: none !important; + } + } + + button[data-action="mobile"] span.fa { + font-size: 20px; + } +} + +.o-snippets-tabs { + font-size: 12px; + line-height: 24px; + + > button { + color: $o-we-color; + } + .active { + box-shadow: inset 0 -2px 0 #01bad2; + } +} + +.o-tab-content { + background-color: $o-we-bg-dark; + font-size: 12px; +} + +.we-bg-darker { + background-color: #2b2b33; +} +.we-bg-options-container { + background-color: #3e3e46; +} + +.o_we_color_preview { + @extend %o-preview-alpha-background; + flex: 0 0 auto; + display: block; + width: $o-we-sidebar-content-field-colorpicker-size; + height: $o-we-sidebar-content-field-colorpicker-size; + border: $o-we-sidebar-content-field-border-width solid $o-we-bg-darkest; + border-radius: 10rem; + cursor: pointer; + + &::after { + content: "" !important; + box-shadow: $o-we-sidebar-content-field-colorpicker-shadow; + } +} + +.o_we_invisible_el_panel { + max-height: 220px; + overflow-y: auto; + padding: $o-we-sidebar-blocks-content-spacing; + background-color: $o-we-sidebar-blocks-content-bg; + box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2); + + .o_panel_header { + padding: $o-we-sidebar-content-field-spacing 0; + } + + .o_we_invisible_entry { + padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-field-clickable-spacing; + cursor: pointer; + + &:hover { + background-color: $o-we-sidebar-bg; + } + } + + ul { + list-style: none; + padding-inline-start: 15px; + margin-bottom: $o-we-sidebar-content-field-spacing - 4px; + } +} + +%o_we_sublevel > .hb-row-label::before { + content: "└"; // TODO The size and look of this depends on the + // browser default font, we should use a SVG instead. + display: inline-block; + margin-right: 0.4em; + + .o_rtl & { + transform: scaleX(-1); + } +} +@for $level from 1 through 3 { + .o_we_sublevel_#{$level} { + @extend %o_we_sublevel; + + @if $level > 1 { + > div:first-of-type::before { + padding-left: ($level - 1) * 0.6em; + } + } + } +} + +.o-snippets-tabs > button[disabled] { + opacity: .5; +} + +// TODO: adjust the style of those elements +.o_we_border_preview { + display: inline-block; + width: 40px; + max-width: 100%; + margin-bottom: 2px; + border-width: 4px; + border-bottom: none !important; +} + +.o_pager_container { + overflow-y: scroll; + scroll-behavior: smooth; +} + +.builder_select_page { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: $o-we-item-spacing / 2; + padding: $o-we-item-spacing; + background-color: $o-we-bg-lighter; + + button { + --PreviewAlphaBg-background-size: 16px; + + @extend %o-preview-alpha-background; + padding: $o-we-item-spacing; + background-color: transparent; + } + // For background shapes + .button_shape { + grid-column: span 2; + padding: 0; + + button, div { + width: 100% !important; + height: 50px; + } + } + img { + width: 100%; + aspect-ratio: 1; + object-fit: contain; + } +} + +.o_we_shape_animated_label { + @include o-position-absolute(0, 0); + padding: 0 4px; + background: $o-we-toolbar-color-accent; + color: white; + + > span { + @include o-text-overflow(inline-block); + max-width: 0; + } +} +div:hover>.o_we_shape_animated_label { + i { + padding-right: $o-we-item-spacing / 2; + } + + > span { + max-width: $o-we-sidebar-width / 2; + transition: max-width 0.5s ease 0s; + } +} + +.o_pager_nav_angle { + @include button-variant($o-we-bg-light, $o-we-bg-light); + padding: $o-we-item-spacing / 2; + font-size: $o-we-sidebar-font-size * 1.4; +} + +@include media-breakpoint-down(md) { + .o_we_shape:not(.o_shape_show_mobile) { + display: none; + } +} + +// TODO Gray scale HUE slider +.o_we_slider_tint input[type="range"] { + appearance: none; + &::-webkit-slider-thumb { + appearance: auto !important; + } + &::-moz-range-thumb { + appearance: auto !important; + } +} diff --git a/addons/html_builder/static/src/builder.variables.scss b/addons/html_builder/static/src/builder.variables.scss new file mode 100644 index 0000000000000..6f18081d46630 --- /dev/null +++ b/addons/html_builder/static/src/builder.variables.scss @@ -0,0 +1,684 @@ +/// +/// This files regroups the variables and mixins which are specific to the editor. +/// + +//------------------------------------------------------------------------------ +// Odoo Editor UI +//------------------------------------------------------------------------------ + +$o-we-bg-darkest: #000000 !default; +$o-we-bg-darker: #141217 !default; +$o-we-bg-dark: #191922 !default; +$o-we-bg-light: #2b2b33 !default; +$o-we-bg-lighter: #3e3e46 !default; +$o-we-bg-lightest: #595964 !default; + +$o-we-fg-darker: #9d9d9d !default; +$o-we-fg-dark: #C6C6C6 !default; +$o-we-fg-light: #D9D9D9 !default; +$o-we-fg-lighter: #FFFFFF !default; + +$o-we-color-danger: #e6586c !default; +$o-we-color-warning: #f0ad4e !default; +$o-we-color-success: #40ad67 !default; +$o-we-color-info: #6999a8 !default; + +$o-we-bg: $o-we-bg-light !default; +$o-we-color: $o-we-fg-light !default; +$o-we-font-size: 13px !default; +$o-we-font-family: $o-font-family-sans-serif !default; +$o-we-accent: #01bad2 !default; +$o-we-border-width: 1px !default; +$o-we-border-color: $o-we-bg-light !default; + +// Needed to be changed to be high enough to not overflow when a user +// has a page with a lot of content (10000px was proven to be too small) +$o-we-handles-offset-to-hide: 100000px !default; +$o-we-handles-btn-size: 14px !default; +$o-we-handles-accent-color: $o-we-accent !default; +$o-we-handles-accent-color-preview: $o-enterprise-color !default; +$o-we-handle-edge-size: $o-we-handles-btn-size !default; +$o-we-handle-border-width: 2px !default; +$o-we-handle-inside-line-width: 3px !default; + +$o-we-dropzone-size: 30px !default; // $grid-gutter-width (todo: allow to use the variable) +$o-we-dropzone-border-width: 2px !default; +$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default; +$o-we-dropzone-accent-color: $o-we-accent !default; +$o-we-dropzone-bg-color: rgba($o-we-dropzone-accent-color, .5) !default; + +// Translations +$o-we-content-to-translate-color: rgba(255, 255, 90, 0.5) !default; +$o-we-translated-content-color: rgba(120, 215, 110, 0.5) !default; + +$o-we-toolbar-height: 40px !default; + +$o-we-item-spacing: 8px !default; +$o-we-item-border-width: 1px !default; +$o-we-item-border-color: transparent !default; +$o-we-item-border-radius: 4px !default; +$o-we-item-clickable-bg: $o-we-bg-lightest!default; +$o-we-item-clickable-color: $o-we-fg-light!default; +$o-we-item-clickable-hover-bg: $o-we-bg-dark!default; +$o-we-item-pressed-bg: $o-we-bg-light !default; +$o-we-item-pressed-color: $o-we-fg-lighter !default; + +$o-we-item-standup-color-light: $o-we-fg-lighter; +$o-we-item-standup-color-dark: $o-we-bg-darkest; +$o-we-item-standup-top: inset 0 1px 0; +$o-we-item-standup-bottom: inset 0 -1px 0; + +$o-we-dropdown-spacing: $o-we-item-spacing !default; +$o-we-dropdown-bg: $o-we-bg-darker !default; +$o-we-dropdown-border-width: 1px !default; +$o-we-dropdown-border-color: $o-we-bg-darkest !default; +$o-we-dropdown-shadow: 0 2px 8px 0 rgba(black, 0.5) !default; +$o-we-dropdown-item-height: 34px !default; +$o-we-dropdown-item-spacing: 1px !default; +$o-we-dropdown-item-bg: $o-we-bg-lightest !default; +$o-we-dropdown-item-bg-hover: $o-we-bg-light !default; +$o-we-dropdown-item-color: $o-we-fg-dark !default; +$o-we-dropdown-item-hover-color: $o-we-fg-light !default; +$o-we-dropdown-item-active-bg: mix($o-we-dropdown-item-bg, $o-we-dropdown-item-bg-hover) !default; +$o-we-dropdown-item-active-color: $o-we-fg-lighter !default; +$o-we-dropdown-caret-spacing: 2px !default; + +$o-we-sidebar-bg: $o-we-bg !default; +$o-we-sidebar-color: $o-we-color !default; +$o-we-sidebar-font-size: 12px !default; +$o-we-sidebar-border-width: $o-we-border-width !default; +$o-we-sidebar-border-color: $o-we-border-color !default; + +// This sidebar width cannot be increased at the moment, it is at the maximum +// value it can have, given our current specs, which is 1920px / 150% - 992px. +// - 1920px: the usual size of user screens, supposedly the browser one if the +// OS task bar is not anchored to the right/left. +// - 150%: this is actually the recommended Windows zoom (virtually decreasing +// the amount of available pixels to fit our UI). +// - 992px: the current minimum width the screen must have for our websites to +// be in "desktop" mode (below, columns break over multiple lines). +// +// If the sidebar is 1px larger, entering edit mode on such Full HD + 150% zoom +// will display the website in "mobile" mode (note it is the same with browser +// zoom or OS zoom). +// +// Notice that 1920px / 150% = 1280px which gives the minimum size of the screen +// that will display the website in "desktop" mode in the editor if no zoom is +// used, which seems like an acceptable value. +// +// Note: reducing the sidebar width even further to support more devices or +// more zoom / OS task bar configuration would be problematic as the sidebar +// would become too small. It is currently kinda at both its maximum and minimum +// authorized value. +// +// We tried solutions to virtually "de-zoom" the website iframe to display the +// website in "desktop" mode no matter what but this did not give great results. +// On problematic devices, the user still has the possibility to de-zoom its +// browser by himself. +$o-we-sidebar-width: 288px !default; // This includes $o-we-sidebar-border-width + +$o-we-sidebar-top-height: 46px !default; + +$o-we-sidebar-tabs-size-ratio: 1 !default; +$o-we-sidebar-tabs-height: 3rem; +$o-we-sidebar-tabs-bg: $o-we-bg-darker !default; +$o-we-sidebar-tabs-color: $o-we-sidebar-color !default; +$o-we-sidebar-tabs-disabled-color: $o-we-fg-darker !default; +$o-we-sidebar-tabs-active-border-width: 2px !default; +$o-we-sidebar-tabs-active-border-color: $o-we-accent !default; +$o-we-sidebar-tabs-active-color: $o-we-fg-lighter !default; + +$o-we-sidebar-blocks-content-bg: $o-we-bg-dark !default; +$o-we-sidebar-blocks-content-spacing: 10px !default; +$o-we-sidebar-blocks-content-snippet-spacing: 2px !default; +$o-we-sidebar-blocks-content-snippet-bg: $o-we-bg-lighter !default; + +$o-we-sidebar-content-highlight-bar-width: 2px !default; +$o-we-sidebar-content-highlight-bar-color: $o-we-accent !default; + +$o-we-sidebar-content-gutter-item-indent: 5px !default; +$o-we-sidebar-content-padding-base: 10px !default; +$o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default; +$o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default; +$o-we-sidebar-content-available-room: $o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent !default; + +$o-we-sidebar-content-main-title-height: 32px !default; +$o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default; +$o-we-sidebar-content-main-title-font-size: 13px !default; + +$o-we-sidebar-content-block-spacing: 10px !default; + +$o-we-sidebar-content-fold-block-bg: $o-we-bg-lighter !default; + +$o-we-sidebar-content-field-spacing: $o-we-item-spacing !default; +$o-we-sidebar-content-field-color: $o-we-fg-darker !default; +$o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default; +$o-we-sidebar-content-field-control-item-size: 1em !default; +$o-we-sidebar-content-field-control-item-spacing: 0.5em !default; +$o-we-sidebar-content-field-label-spacing: 6px !default; + +$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-available-room * .4 !default; +$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing * .5 !default; +$o-we-sidebar-content-field-height: 22px !default; + +$o-we-sidebar-content-field-border-width: $o-we-item-border-width !default; +$o-we-sidebar-content-field-border-color:$o-we-item-border-color !default; +$o-we-sidebar-content-field-border-radius: $o-we-item-border-radius !default; +$o-we-sidebar-content-field-disabled-color: $o-we-sidebar-content-field-control-item-color !default; +$o-we-sidebar-content-field-clickable-bg: $o-we-item-clickable-bg !default; +$o-we-sidebar-content-field-clickable-color: $o-we-item-clickable-color !default; +$o-we-sidebar-content-field-clickable-spacing: $o-we-sidebar-content-field-label-spacing !default; +$o-we-sidebar-content-field-pressed-bg: $o-we-item-pressed-bg !default; +$o-we-sidebar-content-field-pressed-color: $o-we-item-pressed-color !default; + +$o-we-sidebar-content-field-dropdown-spacing: $o-we-dropdown-spacing !default; +$o-we-sidebar-content-field-dropdown-bg: $o-we-dropdown-bg !default; +$o-we-sidebar-content-field-dropdown-border-width: $o-we-dropdown-border-width !default; +$o-we-sidebar-content-field-dropdown-border-color: $o-we-dropdown-border-color !default; +$o-we-sidebar-content-field-dropdown-shadow: $o-we-dropdown-shadow !default; +$o-we-sidebar-content-field-dropdown-item-height: $o-we-dropdown-item-height !default; +$o-we-sidebar-content-field-dropdown-item-spacing: $o-we-dropdown-item-spacing !default; +$o-we-sidebar-content-field-dropdown-item-bg: $o-we-dropdown-item-bg !default; +$o-we-sidebar-content-field-dropdown-item-bg-hover: $o-we-dropdown-item-bg-hover !default; +$o-we-sidebar-content-field-dropdown-item-color: $o-we-dropdown-item-color !default; +$o-we-sidebar-content-field-dropdown-item-hover-color: $o-we-dropdown-item-hover-color !default; +$o-we-sidebar-content-field-dropdown-item-active-bg: $o-we-dropdown-item-active-bg !default; +$o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default; +$o-we-sidebar-content-field-dropdown-grid-item-height: 60px !default; +$o-we-sidebar-content-field-dropdown-grid-item-width: 80px !default; + +$o-we-sidebar-content-field-colorpicker-size: 20px !default; +$o-we-sidebar-content-field-colorpicker-size-large: 26px !default; +$o-we-sidebar-content-field-colorpicker-shadow: inset 0 0 0 1px rgba(white, 0.5) !default; +$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-lighter !default; +$o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !default; +$o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !default; +$o-we-sidebar-content-field-colorpicker-cc-width: 208px !default; +$o-we-sidebar-content-field-colorpicker-cc-height: 26px !default; + +$o-we-sidebar-content-field-input-max-width: 60px !default; +$o-we-sidebar-content-field-input-bg: $o-we-bg-light !default; +$o-we-sidebar-content-field-input-font-family: $o-we-font-family !default; +$o-we-sidebar-content-field-input-unit-font-size: 11px !default; +$o-we-sidebar-content-field-input-border-color: $o-we-accent !default; + +$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing; + +$o-we-sidebar-content-field-progress-height: 4px !default; +$o-we-sidebar-content-field-progress-control-height: 10px !default; +$o-we-sidebar-content-field-progress-color: $o-we-fg-darker !default; +$o-we-sidebar-content-field-progress-active-color: $o-we-accent !default; + +$o-we-sidebar-content-field-toggle-width: 20px !default; +$o-we-sidebar-content-field-toggle-height: 12px !default; +$o-we-sidebar-content-field-toggle-bg: $o-we-fg-darker !default; +$o-we-sidebar-content-field-toggle-active-bg: $o-we-accent !default; +$o-we-sidebar-content-field-toggle-control-width: 11px !default; +$o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-toggle-height - 2px !default; +$o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default; + +$o-we-technical-modal-zindex: 2001; + +//------------------------------------------------------------------------------ +// Preview component Mixins +//------------------------------------------------------------------------------ + +@mixin o-we-preview-box($color-text: white) { + border-top: 1px solid black; + border-bottom: 1px solid white; + background-image: linear-gradient(-150deg, $o-we-bg-light, $o-we-bg-dark); + + color: $color-text; +} + +// ------------------------------------------------------------------ +// Selection wrapper +// ------------------------------------------------------------------ + +@mixin o-we-active-wrapper($icon: '\f00c', $top: auto, $right: auto, $bottom: auto, $left: auto) { + box-shadow: 0 0 0 3px $o-brand-primary; + + &:not(.fa) { + border: 3px solid $o-brand-primary; + box-shadow: none; + &:before { + content: $icon; + @include o-position-absolute($top, $right, $bottom, $left); + width: 19px; + height: 19px; + background-color: $o-brand-primary; + font-family: 'FontAwesome'; + color: white; + border-radius: 50%; + text-align: center; + z-index: 1; + box-shadow: $box-shadow; + } + } +} + +//------------------------------------------------------------------------------ +// Edited content +//------------------------------------------------------------------------------ + +$o-support-13-0-color-system: false !default; + +$o-checklist-margin-left: 20px; +$o-checklist-checkmark-width: 2px; +$o-checklist-before-size: 13px; + + +// Edition colors + +// Note: the "base" palettes contain all possible keys a palette should or +// must contain, with a default value which should work in use cases where it +// will be used. Any palette defined by an app will be merged with the base +// palette once selected to ensure it works. + +// Colors +$o-base-color-palette: ( + 'o-color-1': transparent, + 'o-color-2': transparent, + 'o-color-3': transparent, + 'o-color-4': transparent, + 'o-color-5': transparent, +) !default; +$o-color-palettes: ( + 'base-1': ( + 'o-color-1': $o-enterprise-color, + 'o-color-2': #2D3142, + 'o-color-3': #F3F2F2, + 'o-color-4': #FFFFFF, + 'o-color-5': #111827, + ), + 'base-2': ( + 'o-color-1': #337ab7, + 'o-color-2': #e9ecef, + 'o-color-3': #F8F9FA, + 'o-color-4': #FFFFFF, + 'o-color-5': #343a40, + ), +) !default; +$o-color-palette-name: 'base-1' !default; + +// Theme colors +$o-base-theme-color-palette: () !default; +$o-theme-color-palettes: ( + // alpha -> epsilon are old color names kept for compatibility. + // They should not be used in the code base anymore and ideally they will + // not generate any classes for >= 13.4 databases. + 'base-1': ( + 'alpha': $o-enterprise-action-color, + 'beta': $o-enterprise-color, + 'gamma': #5C5B80, + 'delta': #5B899E, + 'epsilon': #E46F78, + ), +) !default; +$o-theme-color-palette-name: 'base-1' !default; + +// Greyscale transparent colours + +// Note: BS values are forced by default in every palette as the values can +// be used in bootstrap_overridden.scss files through the o-color function. +// Also, all of the gray colors generates bg- classes in Odoo so black and white +// are added for the same reason. + +$o-base-gray-color-palette: ( + 'white': #FFFFFF, + '100': #F8F9FA, + '200': #E9ECEF, + '300': #DEE2E6, + '400': #CED4DA, + '500': #ADB5BD, + '600': #6C757D, + '700': #495057, + '800': #343A40, + '900': #212529, + 'black': #000000, +) !default; +$o-transparent-grays: ( + 'black-15': rgba(black, 0.15), + 'black-25': rgba(black, 0.25), + 'black-50': rgba(black, 0.5), + 'black-75': rgba(black, 0.75), + 'white-25': rgba(white, 0.25), + 'white-50': rgba(white, 0.5), + 'white-75': rgba(white, 0.75), + 'white-85': rgba(white, 0.85), +) !default; +$o-gray-color-palettes: () !default; +$o-gray-color-palette-name: '' !default; + +// Color combinations +$o-base-color-combination: ( + 'bg': 'white', + 'text': null, // Default to better contrast with the 'bg' + 'headings': null, // Default to 'text' + 'h2': null, // Default to 'h(x-1)' + 'h3': null, + 'h4': null, + 'h5': null, + 'h6': null, + 'link': null, // Default to BS 'primary' (= first odoo color) + 'btn-primary': null, // Default to BS 'primary' (= first odoo color) + 'btn-primary-border': null, // Default to 'btn-primary' + 'btn-secondary': null, // Default to BS 'secondary' (= second odoo color) + 'btn-secondary-border': null, // Default to 'btn-secondary' +); +$o-color-combinations-presets: ( + ( + ( + 'bg': 'o-color-4', + ), + ( + 'bg': 'o-color-3', + 'headings': 'o-color-5', + ), + ( + 'bg': 'o-color-2', + 'btn-secondary': 'o-color-3', + ), + ( + 'bg': 'o-color-1', + 'link': 'o-color-5', + 'btn-primary': 'o-color-5', + 'btn-secondary': 'o-color-3', + ), + ( + 'bg': 'o-color-5', + 'headings': 'o-color-4', + 'btn-secondary': 'o-color-3', + ), + ), +) !default; +$o-color-combinations-preset-number: 1; + +// We allow snippets to be colored and elements like card and columns to be +// colored as well. We need components targeted by those colored classes to +// use the deepest coloring element config. We only allow here for this to +// work for one level of nesting. Note: snippets which can contain other +// snippets will have problem because of this; this is a limitation of the +// system until a better solution is found. +$o-color-extras-nesting-selector: '&, .o_colored_level &'; + +// Apply colors according to the given identifier. Can either be a preset +// number, a color name or a css color. +@mixin o-apply-colors($identifier, $with-extras: true, $background: $body-bg) { + $-related-color: o-related-color($identifier, $max-recursions: 10); + @if type-of($-related-color) == 'number' { + // This is a preset to be applied, just extend it. This should probably + // be avoided and use the class in XML if possible. + @extend .o_cc; + @extend .o_cc#{$-related-color}; + } @else { + @include o-bg-color(o-color($-related-color), $with-extras: $with-extras, $background: $background, $important: false); + } +} + +// Function which returns if a color has contrast enough in comparaison to +// another given color. +@function has-enough-contrast($color1, $color2, $threshold: 500) { + $r: (max(red($color1), red($color2))) - (min(red($color1), red($color2))); + $g: (max(green($color1), green($color2))) - (min(green($color1), green($color2))); + $b: (max(blue($color1), blue($color2))) - (min(blue($color1), blue($color2))); + $sum-rgb: $r + $g + $b; + @return ($sum-rgb >= $threshold); +} + +// Function which transforms a color to increase its contrast in comparison to +// another given color. +@function increase-contrast($color1, $color2) { + @if not $color1 or not $color2 { + @return null; + } + $luma-c1: luma($color1); + $luma-c2: luma($color2); + $lightness-c1: lightness($color1); + $lightness-inc: if($luma-c1 < $luma-c2, -1%, 1%); + $i: 0; + // Max 25% lightness change even if not contrasted enough + @while ($lightness-c1 > 0.1% and $lightness-c1 < 99.9% and $i < 25 and not has-enough-contrast($color1, $color2)) { + $color1: adjust-color($color1, $lightness: $lightness-inc); + $lightness-c1: $lightness-c1 + $lightness-inc; + $i: $i + 1; + } + @return $color1; +} + +// Given a primary color (and eventually a secondary one), the function returns +// a basic odoo palette in sass-map format. The palette will be generated using +// the safest readability values possible. +@function o-make-palette($-primary, $-secondary: null, $-overrides-map: null) { + $-o-color-2: $-secondary or increase-contrast(desaturate(mix(complement($-primary), #FFFFFF, 80%), 20%), $-primary); + + $-palette: ( + 'o-color-1': $-primary, + 'o-color-2': $-o-color-2, + 'o-color-3': change-color(#F5F0F0, $hue: hue($-primary), $saturation: min(saturation($-primary), saturation(#F5F0F0))), + 'o-color-4': #FFFFFF, + 'o-color-5': change-color(#2e1414, $hue: hue($-primary), $saturation: min(saturation($-primary), saturation(#2e1414))), + ); + + // Check if primary/dark contrast is enough. If not adapt cc4 & cc5 schemes accordingly + @if not (has-enough-contrast(map-get($-palette, 'o-color-5'), map-get($-palette, 'o-color-1'), 300)) { + @each $-cc in (4, 5) { + $-palette: map-merge($-palette, ( + 'o-cc#{$-cc}-btn-primary': 'o-color-4', + 'o-cc#{$-cc}-btn-secondary': 'o-color-2', + 'o-cc#{$-cc}-text': 'o-color-3', + 'o-cc#{$-cc}-link': 'o-color-4' + )); + } + } + + @if $-overrides-map { + $-palette: map-merge($-palette, $-overrides-map); + } + + @return $-palette; +} + +// format: (module_name: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...)) +$o-bg-shapes: ('web_editor': ( + 'Airy/01': ('position': bottom, 'size': 100% auto, 'colors': (1)), + 'Airy/02': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Airy/03': ('position': top, 'size': 100% auto, 'colors': (5)), + 'Airy/03_001': ('position': top, 'size': 100% auto, 'colors': (5)), + 'Airy/04': ('position': center, 'size': 100% 100%, 'colors': (1)), + 'Airy/04_001': ('position': center, 'size': 100% 100%, 'colors': (1)), + 'Airy/05': ('position': center, 'size': 100% 100%, 'colors': (1)), + 'Airy/05_001': ('position': center, 'size': 100% 100%, 'colors': (1)), + 'Airy/06': ('position': bottom, 'size': 100% auto, 'colors': (2)), + 'Airy/07': ('position': top, 'size': 100% auto, 'colors': (2)), + 'Airy/08': ('position': bottom, 'size': 100% auto, 'colors': (1)), + 'Airy/09': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Airy/10': ('position': bottom, 'size': 100% auto, 'colors': (5)), + 'Airy/11': ('position': top, 'size': 100% auto, 'colors': (5)), + 'Airy/12': ('position': top, 'size': 100% auto, 'colors': (1, 3)), + 'Airy/12_001': ('position': top, 'size': 100% auto, 'colors': (1, 3)), + 'Airy/13': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)), + 'Airy/13_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)), + 'Airy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)), + 'Blobs/01': ('position': top, 'size': 100% auto, 'colors': (2)), + 'Blobs/01_001': ('position': top, 'size': 100% auto, 'colors': (2)), + 'Blobs/02': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)), + 'Blobs/03': ('position': top, 'size': 100% auto, 'colors': (2)), + 'Blobs/04': ('position': center, 'size': 100% auto, 'colors': (5)), + 'Blobs/05': ('position': bottom, 'size': 100% auto, 'colors': (1)), + 'Blobs/06': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Blobs/07': ('position': top, 'size': 100% auto, 'colors': (5)), + 'Blobs/08': ('position': right, 'size': 100% auto, 'colors': (1)), + 'Blobs/09': ('position': bottom, 'size': 100% auto, 'colors': (3)), + 'Blobs/10': ('position': top, 'size': 100% auto, 'colors': (1, 5)), + 'Blobs/10_001': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Blobs/11': ('position': center, 'size': 100% auto, 'colors': (1)), + 'Blobs/12': ('position': bottom, 'size': 100% auto, 'colors': (1)), + 'Blocks/01': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5)), + 'Blocks/01_001': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5)), + 'Blocks/02': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5)), + 'Blocks/02_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5)), + 'Blocks/03': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)), + 'Blocks/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3, 5)), + 'Bold/01': ('position': top, 'size': 100% auto, 'colors': (2)), + 'Bold/02': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3)), + 'Bold/03': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5)), + 'Bold/04': ('position': top, 'size': 100% auto, 'colors': (2, 3)), + 'Bold/05': ('position': center, 'size': 100% auto, 'colors': (5)), + 'Bold/05_001': ('position': center, 'size': 100% auto, 'colors': (3)), + 'Bold/06': ('position': center, 'size': 100% auto, 'colors': (5)), + 'Bold/06_001': ('position': center, 'size': 100% auto, 'colors': (3)), + 'Bold/07': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)), + 'Bold/07_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)), + 'Bold/08': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Bold/09': ('position': bottom, 'size': 100% auto, 'colors': (2, 3)), + 'Bold/10': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5)), + 'Bold/10_001': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5)), + 'Bold/11': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3)), + 'Bold/11_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)), + 'Bold/12': ('position': center, 'size': 100% auto, 'colors': (1, 2, 5)), + 'Bold/12_001': ('position': center, 'size': 100% auto, 'colors': (1, 2, 5)), + 'Floats/01': ('position': center right, 'size': auto 100%, 'colors': (1, 2, 3, 4, 5)), + 'Floats/02': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5)), + 'Floats/03': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5)), + 'Floats/04': ('position': center, 'size': 100%, 'colors': (1, 2, 4, 5)), + 'Floats/05': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5)), + 'Floats/06': ('position': center, 'size': auto 100%, 'colors': (1, 2, 3, 5)), + 'Floats/07': ('position': right bottom, 'size': auto 100%, 'colors': (1, 2, 3, 5)), + 'Floats/08': ('position': top left, 'size': auto 100%, 'colors': (1, 2, 3, 5)), + 'Floats/09': ('position': center right, 'size': auto 100%, 'colors': (1, 2, 3)), + 'Floats/10': ('position': center, 'size': 100% auto, 'colors': (1, 2, 3, 5)), + 'Floats/11': ('position': center, 'size': 100% 100%, 'colors': (1, 3)), + 'Floats/12': ('position': top, 'size': 100% auto, 'colors': (1, 2, 3, 5), 'repeat-y': true), + 'Floats/13': ('position': center, 'size': auto 100%, 'colors': (1, 2, 5)), + 'Floats/14': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5), 'repeat-y': true), + 'Origins/01': ('position': bottom, 'size': 100% auto, 'colors': (2, 5)), + 'Origins/02': ('position': bottom, 'size': 100% auto, 'colors': (3)), + 'Origins/02_001': ('position': bottom, 'size': 100% auto, 'colors': (4, 5)), + 'Origins/03': ('position': top, 'size': 100% auto, 'colors': (3)), + 'Origins/04': ('position': bottom, 'size': 100% auto, 'colors': (3)), + 'Origins/04_001': ('position': top, 'size': 100% 100%, 'colors': (3)), + 'Origins/05': ('position': top, 'size': 100% auto, 'colors': (3)), + 'Origins/06': ('position': center, 'size': 100% auto, 'colors': (3)), + 'Origins/06_001': ('position': center, 'size': 100% auto, 'colors': (3, 4)), + 'Origins/07': ('position': center, 'size': 100% 100%, 'colors': (3)), + 'Origins/07_001': ('position': center, 'size': 100% 100%, 'colors': (3, 5)), + 'Origins/07_002': ('position': center, 'size': 100% 100%, 'colors': (3, 4, 5)), + 'Origins/08': ('position': bottom, 'size': 100% auto, 'colors': (3)), + 'Origins/09': ('position': top, 'size': 100% auto, 'colors': (1, 5)), + 'Origins/09_001': ('position': top, 'size': 100% auto, 'colors': (3)), + 'Origins/10': ('position': bottom, 'size': 100% auto, 'colors': (2, 5)), + 'Origins/11': ('position': top, 'size': 100% auto, 'colors': (3, 5)), + 'Origins/11_001': ('position': top, 'size': 100% auto, 'colors': (3, 4)), + 'Origins/12': ('position': top, 'size': 100% auto, 'colors': (3, 5)), + 'Origins/13': ('position': center, 'size': 100% auto, 'colors': (3, 5)), + 'Origins/14': ('position': bottom, 'size': 100% auto, 'colors': (4)), + 'Origins/14_001': ('position': bottom, 'size': 100% auto, 'colors': (3, 4)), + 'Origins/15': ('position': top, 'size': 100% auto, 'colors': (4)), + 'Origins/16': ('position': center, 'size': 100% 100%, 'colors': (3)), + 'Origins/17': ('position': center, 'size': 100% 100%, 'colors': (3)), + 'Origins/18': ('position': center, 'size': 100% 100%, 'colors': (1)), + 'Origins/19': ('position': center, 'size': 100% 100%, 'colors': (5)), + 'Rainy/01': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)), + 'Rainy/01_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)), + 'Rainy/02': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5)), + 'Rainy/02_001': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5)), + 'Rainy/03': ('position': top, 'size': 100% auto, 'colors': (2, 4, 5), 'repeat-y': true), + 'Rainy/03_001': ('position': top, 'size': 100% auto, 'colors': (2, 5), 'repeat-y': true), + 'Rainy/04': ('position': top, 'size': 100% auto, 'colors': (1, 5)), + 'Rainy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5)), + 'Rainy/05_001': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Rainy/06': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3)), + 'Rainy/07': ('position': top, 'size': 100% auto, 'colors': (1, 2, 3)), + 'Rainy/08': ('position': top, 'size': 100% auto, 'colors': (1, 4)), + 'Rainy/08_001': ('position': top, 'size': 100% auto, 'colors': (1, 4)), + 'Rainy/09': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Rainy/09_001': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Rainy/10': ('position': center, 'size': 100% auto, 'colors': (1, 3)), + 'Wavy/01': ('position': bottom, 'size': 100% auto, 'colors': (4)), + 'Wavy/01_001': ('position': bottom, 'size': 100% auto, 'colors': (3)), + 'Wavy/02': ('position': top, 'size': 100% auto, 'colors': (4)), + 'Wavy/02_001': ('position': top, 'size': 100% auto, 'colors': (3)), + 'Wavy/03': ('position': top, 'size': 100% auto, 'colors': (1, 2)), + 'Wavy/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)), + 'Wavy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5)), + 'Wavy/06': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5)), + 'Wavy/06_001': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5)), + 'Wavy/07': ('position': top, 'size': 100% auto, 'colors': (3)), + 'Wavy/08': ('position': top, 'size': 100% auto, 'colors': (2)), + 'Wavy/09': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)), + 'Wavy/10': ('position': center, 'size': 100% auto, 'colors': (1, 2)), + 'Wavy/11': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)), + 'Wavy/12': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Wavy/12_001': ('position': bottom, 'size': 100% auto, 'colors': (1)), + 'Wavy/13': ('position': bottom, 'size': 100% auto, 'colors': (4)), + 'Wavy/13_001': ('position': bottom, 'size': 100% auto, 'colors': (1)), + 'Wavy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 3)), + 'Wavy/15': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Wavy/16': ('position': bottom, 'size': 100% auto, 'colors': (1)), + 'Wavy/17': ('position': top, 'size': 100% auto, 'colors': (1)), + 'Wavy/18': ('position': bottom, 'size': 100% auto, 'colors': (5)), + 'Wavy/19': ('position': top, 'size': 100% auto, 'colors': (5)), + 'Wavy/20': ('position': bottom, 'size': 100% auto, 'colors': (2)), + 'Wavy/21': ('position': top, 'size': 100% auto, 'colors': (2)), + 'Wavy/22': ('position': bottom, 'size': 100% auto, 'colors': (3)), + 'Wavy/23': ('position': top, 'size': 100% auto, 'colors': (3)), + 'Wavy/24': ('position': center, 'size': 100% auto, 'colors': (1, 2)), + 'Wavy/25': ('position': top, 'size': 100% auto, 'colors': (1, 2)), + 'Wavy/26': ('position': bottom right, 'size': auto 100%, 'colors': (1, 2)), + 'Wavy/27': ('position': center, 'size': 100% auto, 'colors': (1, 2)), + 'Wavy/28': ('position': center, 'size': 100% 100%, 'colors': (1, 3)), + 'Zigs/01': ('position': bottom, 'size': 100% auto, 'colors': (2)), + 'Zigs/01_001': ('position': bottom, 'size': 100% auto, 'colors': (2)), + 'Zigs/02': ('position': bottom, 'size': 100% auto, 'colors': (2)), + 'Zigs/02_001': ('position': bottom, 'size': 100% auto, 'colors': (2)), + 'Zigs/03': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': true), + 'Zigs/04': ('position': bottom, 'size': 100% auto, 'colors': (1)), + 'Zigs/05': ('position': bottom, 'size': 100% auto, 'colors': (3)), + 'Zigs/06': ('position': bottom, 'size': 30px 100%, 'colors': (4, 5), 'repeat-x': true), +)); + +@function change-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) { + $-module-shapes: map-get($shapes, $module); + $-modified-module-shapes: map-merge($-module-shapes, ( + $shape-name: map-merge(map-get($-module-shapes, $shape-name), ('color-to-cc-bg-map': $mapping)), + )); + @return map-merge($shapes, ( + $module: $-modified-module-shapes, + )); +} + +@function add-extra-shape-colors-mapping($module, $shape-name, $mapping-name, $mapping, $shapes: $o-bg-shapes) { + $-module-shapes: map-get($shapes, $module); + $-shape-data: map-get($-module-shapes, $shape-name); + $-extra-mappings: map-get($-shape-data, 'extra-mappings') or (); + $-modified-module-shapes: map-merge($-module-shapes, ( + $shape-name: map-merge($-shape-data, ('extra-mappings': map-merge($-extra-mappings, ($mapping-name: $mapping)))), + )); + @return map-merge($shapes, ( + $module: $-modified-module-shapes, + )); +} + +@function add-header-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) { + @return add-extra-shape-colors-mapping($module, $shape-name, 'header', $mapping, $shapes); +} + +@function add-footer-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) { + @return add-extra-shape-colors-mapping($module, $shape-name, 'footer', $mapping, $shapes); +} + +@mixin o-input-number-no-arrows() { + // Remove arrows/spinners from input type number + // => Chrome, Safari, Edge, Opera + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + + // => Firefox + input[type=number] { + -moz-appearance: textfield; + } +}; diff --git a/addons/html_builder/static/src/builder.xml b/addons/html_builder/static/src/builder.xml new file mode 100644 index 0000000000000..c5479b3c9a20b --- /dev/null +++ b/addons/html_builder/static/src/builder.xml @@ -0,0 +1,47 @@ + + + + +
+
+
+
+
+
+ + +
+ + + +
+
+
+ + + +
+
+ + + + + + + + + +
+ +
+ + + diff --git a/addons/html_builder/static/src/core/anchor/anchor_dialog.js b/addons/html_builder/static/src/core/anchor/anchor_dialog.js new file mode 100644 index 0000000000000..f4891e283a67a --- /dev/null +++ b/addons/html_builder/static/src/core/anchor/anchor_dialog.js @@ -0,0 +1,38 @@ +import { Component, useRef, useState } from "@odoo/owl"; +import { _t } from "@web/core/l10n/translation"; +import { Dialog } from "@web/core/dialog/dialog"; + +export class AnchorDialog extends Component { + static template = "html_builder.AnchorDialog"; + static components = { Dialog }; + static props = { + currentAnchorName: { type: String }, + renameAnchor: { type: Function }, + deleteAnchor: { type: Function }, + formatAnchor: { type: Function }, + close: { type: Function }, + }; + + setup() { + this.title = _t("Link Anchor"); + this.inputRef = useRef("anchor-input"); + this.state = useState({ isValid: true }); + } + + async onConfirmClick() { + const newAnchorName = this.props.formatAnchor(this.inputRef.el.value); + if (newAnchorName === this.props.currentAnchorName) { + this.props.close(); + } + + this.state.isValid = await this.props.renameAnchor(newAnchorName); + if (this.state.isValid) { + this.props.close(); + } + } + + onRemoveClick() { + this.props.deleteAnchor(); + this.props.close(); + } +} diff --git a/addons/html_builder/static/src/core/anchor/anchor_dialog.xml b/addons/html_builder/static/src/core/anchor/anchor_dialog.xml new file mode 100644 index 0000000000000..794402c6ada32 --- /dev/null +++ b/addons/html_builder/static/src/core/anchor/anchor_dialog.xml @@ -0,0 +1,28 @@ + + + + + +
+ +
+ +
+

The chosen name already exists

+
+
+
+ + + + + + + + + diff --git a/addons/html_builder/static/src/core/anchor/anchor_plugin.js b/addons/html_builder/static/src/core/anchor/anchor_plugin.js new file mode 100644 index 0000000000000..b26f5a8b4bea4 --- /dev/null +++ b/addons/html_builder/static/src/core/anchor/anchor_plugin.js @@ -0,0 +1,131 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { browser } from "@web/core/browser/browser"; +import { _t } from "@web/core/l10n/translation"; +import { markup } from "@odoo/owl"; +import { AnchorDialog } from "./anchor_dialog"; +import { getElementsWithOption } from "@html_builder/utils/utils"; + +const anchorSelector = ":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *"; +const anchorExclude = + ".modal *, .oe_structure .oe_structure *, [data-oe-type=html] .oe_structure *, .s_popup"; + +export function canHaveAnchor(element) { + return element.matches(anchorSelector) && !element.matches(anchorExclude); +} + +export class AnchorPlugin extends Plugin { + static id = "anchor"; + static dependencies = ["history"]; + static shared = ["createOrEditAnchorLink"]; + resources = { + on_cloned_handlers: this.onCloned.bind(this), + get_options_container_top_buttons: withSequence( + 0, + this.getOptionsContainerTopButtons.bind(this) + ), + }; + + onCloned({ cloneEl }) { + const anchorEls = getElementsWithOption(cloneEl, anchorSelector, anchorExclude); + anchorEls.forEach((anchorEl) => this.deleteAnchor(anchorEl)); + } + + getOptionsContainerTopButtons(el) { + if (!canHaveAnchor(el)) { + return []; + } + + return [ + { + class: "fa fa-fw fa-link oe_snippet_anchor btn btn-outline-info", + title: _t("Create and copy a link targeting this block or edit it"), + handler: this.createOrEditAnchorLink.bind(this), + }, + ]; + } + + // TODO check if no other way when doing popup options. + isModal(element) { + element.classList.contains("modal"); + } + + setAnchorName(element, value) { + if (value) { + element.id = value; + if (!this.isModal(element)) { + element.dataset.anchor = true; + } + } else { + this.deleteAnchor(element); + } + this.dependencies.history.addStep(); + } + + createAnchor(element) { + const titleEls = element.querySelectorAll("h1, h2, h3, h4, h5, h6"); + const title = titleEls.length > 0 ? titleEls[0].innerText : element.dataset.name; + const anchorName = this.formatAnchor(title); + + let n = ""; + while (this.document.getElementById(anchorName + n)) { + n = (n || 1) + 1; + } + + this.setAnchorName(element, anchorName + n); + } + + deleteAnchor(element) { + element.removeAttribute("data-anchor"); + element.removeAttribute("id"); + } + + getAnchorLink(element) { + const pathName = this.isModal(element) ? "" : this.document.location.pathname; + return `${pathName}#${element.id}`; + } + + async createOrEditAnchorLink(element) { + if (!element.id) { + this.createAnchor(element); + } + const anchorLink = this.getAnchorLink(element); + await browser.navigator.clipboard.writeText(anchorLink); + const message = markup(_t("Anchor copied to clipboard
Link: %s", anchorLink)); + const closeNotification = this.services.notification.add(message, { + type: "success", + buttons: [ + { + name: _t("Edit"), + primary: true, + onClick: () => { + closeNotification(); + // Open the "rename anchor" dialog. + this.services.dialog.add(AnchorDialog, { + currentAnchorName: decodeURIComponent(element.id), + renameAnchor: async (anchorName) => { + const alreadyExists = !!this.document.getElementById(anchorName); + if (alreadyExists) { + return false; + } + + this.setAnchorName(element, anchorName); + await this.createOrEditAnchorLink(element); + return true; + }, + deleteAnchor: () => { + this.deleteAnchor(element); + this.dependencies.history.addStep(); + }, + formatAnchor: this.formatAnchor, + }); + }, + }, + ], + }); + } + + formatAnchor(text) { + return encodeURIComponent(text.trim().replace(/\s+/g, "-")); + } +} diff --git a/addons/html_builder/static/src/core/builder_actions_plugin.js b/addons/html_builder/static/src/core/builder_actions_plugin.js new file mode 100644 index 0000000000000..b53dde73ed7a7 --- /dev/null +++ b/addons/html_builder/static/src/core/builder_actions_plugin.js @@ -0,0 +1,42 @@ +import { Plugin } from "@html_editor/plugin"; + +/** + * @typedef {Object} BuilderAction + * @property {string} id + * @property {Function} apply + * @property {Function} [isApplied] + * @property {Function} [clean] + * @property {() => Promise} [load] + */ + +export class BuilderActionsPlugin extends Plugin { + static id = "builderActions"; + static shared = ["getAction"]; + + setup() { + this.actions = {}; + for (const actions of this.getResource("builder_actions")) { + for (const [actionId, action] of Object.entries(actions)) { + if (actionId in this.actions) { + throw new Error(`Duplicate builder action id: ${actionId}`); + } + this.actions[actionId] = { id: actionId, ...action }; + } + } + Object.freeze(this.actions); + } + + /** + * Get the action object for the given action ID. + * + * @param {string} actionId + * @returns {Object} + */ + getAction(actionId) { + const action = this.actions[actionId]; + if (!action) { + throw new Error(`Unknown builder action id: ${actionId}`); + } + return action; + } +} diff --git a/addons/html_builder/static/src/core/builder_component_plugin.js b/addons/html_builder/static/src/core/builder_component_plugin.js new file mode 100644 index 0000000000000..267c430d10fc2 --- /dev/null +++ b/addons/html_builder/static/src/core/builder_component_plugin.js @@ -0,0 +1,67 @@ +import { DropdownItem } from "@web/core/dropdown/dropdown_item"; +import { BuilderButtonGroup } from "./building_blocks/builder_button_group"; +import { Dropdown } from "@web/core/dropdown/dropdown"; +import { BuilderDateTimePicker } from "./building_blocks/builder_datetimepicker"; +import { BuilderRow } from "./building_blocks/builder_row"; +import { BuilderButton } from "./building_blocks/builder_button"; +import { BuilderNumberInput } from "./building_blocks/builder_number_input"; +import { BuilderSelect } from "./building_blocks/builder_select"; +import { BuilderSelectItem } from "./building_blocks/builder_select_item"; +import { BuilderColorPicker } from "./building_blocks/builder_colorpicker"; +import { BuilderTextInput } from "./building_blocks/builder_text_input"; +import { BuilderCheckbox } from "./building_blocks/builder_checkbox"; +import { BuilderRange } from "./building_blocks/builder_range"; +import { BuilderContext } from "./building_blocks/builder_context"; +import { BasicMany2Many } from "./building_blocks/basic_many2many"; +import { BuilderMany2Many } from "./building_blocks/builder_many2many"; +import { BuilderMany2One } from "./building_blocks/builder_many2one"; +import { BuilderUrlPicker } from "./building_blocks/builder_urlpicker"; +import { ModelMany2Many } from "./building_blocks/model_many2many"; +import { Plugin } from "@html_editor/plugin"; +import { Img } from "./img"; + +export class BuilderComponentPlugin extends Plugin { + static id = "builderComponents"; + static shared = ["getComponents"]; + + resources = { + builder_components: { + BuilderContext, + BuilderRow, + Dropdown, + DropdownItem, + BuilderButtonGroup, + BuilderButton, + BuilderTextInput, + BuilderNumberInput, + BuilderRange, + BuilderColorPicker, + BuilderSelect, + BuilderSelectItem, + BuilderCheckbox, + BasicMany2Many, + BuilderMany2Many, + BuilderMany2One, + ModelMany2Many, + BuilderDateTimePicker, + BuilderUrlPicker, + Img, + }, + }; + + setup() { + this.Components = {}; + for (const r of this.getResource("builder_components")) { + for (const C in r) { + if (C in this.Components) { + throw new Error(`Duplicated builder component: ${C}`); + } + this.Components[C] = r[C]; + } + } + } + + getComponents() { + return this.Components; + } +} diff --git a/addons/html_builder/static/src/core/builder_options_plugin.js b/addons/html_builder/static/src/core/builder_options_plugin.js new file mode 100644 index 0000000000000..30c2c3de4ad9d --- /dev/null +++ b/addons/html_builder/static/src/core/builder_options_plugin.js @@ -0,0 +1,292 @@ +import { Plugin } from "@html_editor/plugin"; +import { uniqueId } from "@web/core/utils/functions"; +import { isRemovable } from "./remove_plugin"; +import { isClonable } from "./clone_plugin"; +import { getElementsWithOption } from "@html_builder/utils/utils"; +import { shouldEditableMediaBeEditable } from "@html_builder/utils/utils_css"; + +export class BuilderOptionsPlugin extends Plugin { + static id = "builder-options"; + static dependencies = [ + "selection", + "overlay", + "operation", + "history", + "builderOverlay", + "overlayButtons", + ]; + static shared = [ + "computeContainers", + "getContainers", + "updateContainers", + "deactivateContainers", + "getPageContainers", + "getRemoveDisabledReason", + "getCloneDisabledReason", + ]; + resources = { + step_added_handlers: () => this.updateContainers(), + clean_for_save_handlers: this.cleanForSave.bind(this), + post_undo_handlers: this.restoreContainer.bind(this), + post_redo_handlers: this.restoreContainer.bind(this), + // Resources definitions: + remove_disabled_reason_providers: [ + // ({ el, reasons }) => { + // reasons.push(`I hate ${el.dataset.name}`); + // } + ], + clone_disabled_reason_providers: [ + // ({ el, reasons }) => { + // reasons.push(`I hate ${el.dataset.name}`); + // } + ], + }; + + setup() { + this.builderOptions = this.getResource("builder_options").map((option) => ({ + ...option, + id: uniqueId(), + })); + this.builderHeaderMiddleButtons = this.getResource("builder_header_middle_buttons").map( + (headerMiddleButton) => ({ ...headerMiddleButton, id: uniqueId() }) + ); + this.builderContatinerTitle = this.getResource("container_title").map((containerTitle) => ({ + ...containerTitle, + id: uniqueId(), + })); + // doing this manually instead of using addDomListener. This is because + // addDomListener will ignore all events from protected targets. But in + // our case, we still want to update the containers. + this.onClick = this.onClick.bind(this); + this.editable.addEventListener("click", this.onClick, { capture: true }); + + this.lastContainers = []; + if (this.config.initialTarget) { + const el = this.editable.querySelector(this.config.initialTarget); + this.updateContainers(el); + } + } + + destroy() { + this.editable.removeEventListener("click", this.onClick, { capture: true }); + } + + onClick(ev) { + this.updateContainers(ev.target); + } + + updateContainers(target) { + if (this.dependencies.history.getIsCurrentStepModified()) { + console.warn( + "Should not have any mutations in the current step when you update the container selection" + ); + } + if (this.dependencies.history.getIsPreviewing()) { + return; + } + if (target) { + this.target = target; + } + if (!this.target || !this.target.isConnected) { + this.lastContainers = this.lastContainers.filter((c) => c.element.isConnected); + this.target = this.lastContainers.at(-1)?.element; + this.dependencies.history.setStepExtra("optionSelection", this.target); + this.dispatchTo("change_current_options_containers_listeners", this.lastContainers); + return; + } + + const newContainers = this.computeContainers(this.target); + // Do not update the containers if they did not change. + if (newContainers.length === this.lastContainers.length) { + const previousIds = this.lastContainers.map((c) => c.id); + const newIds = newContainers.map((c) => c.id); + const areSameElements = newIds.every((id, i) => id === previousIds[i]); + if (areSameElements) { + const previousOptions = this.lastContainers.flatMap((c) => [ + ...c.options, + ...c.headerMiddleButtons, + c.containerTitle, + ]); + const newOptions = newContainers.flatMap((c) => [ + ...c.options, + ...c.headerMiddleButtons, + c.containerTitle, + ]); + const areSameOptions = + newOptions.length === previousOptions.length && + newOptions.every((option, i) => option.id === previousOptions[i].id); + if (areSameOptions) { + return; + } + } + } + + this.lastContainers = newContainers; + this.dependencies.history.setStepExtra("optionSelection", this.target); + this.dispatchTo("change_current_options_containers_listeners", this.lastContainers); + } + + deactivateContainers() { + this.target = null; + this.lastContainers = []; + this.dispatchTo("change_current_options_containers_listeners", this.lastContainers); + } + + computeContainers(target) { + const mapElementsToOptions = (options) => { + const map = new Map(); + for (const option of options) { + const { selector, exclude, editableOnly } = option; + let elements = getClosestElements(target, selector); + if (!elements.length) { + continue; + } + elements = elements.filter((el) => checkElement(el, { exclude, editableOnly })); + + for (const element of elements) { + if (map.has(element)) { + map.get(element).push(option); + } else { + map.set(element, [option]); + } + } + } + return map; + }; + const elementToOptions = mapElementsToOptions(this.builderOptions); + const elementToHeaderMiddleButtons = mapElementsToOptions(this.builderHeaderMiddleButtons); + const elementToContatinerTitle = mapElementsToOptions(this.builderContatinerTitle); + + // Find the closest element with no options that should still have the + // overlay buttons. + let element = target; + while (element && !elementToOptions.has(element)) { + if (this.hasOverlayOptions(element)) { + elementToOptions.set(element, []); + break; + } + element = element.parentElement; + } + + const previousElementToIdMap = new Map(this.lastContainers.map((c) => [c.element, c.id])); + return [...elementToOptions] + .sort(([a], [b]) => (b.contains(a) ? 1 : -1)) + .map(([element, options]) => ({ + id: previousElementToIdMap.get(element) || uniqueId(), + element, + options, + headerMiddleButtons: elementToHeaderMiddleButtons.get(element) || [], + containerTitle: elementToContatinerTitle.get(element) + ? elementToContatinerTitle.get(element)[0] + : {}, + hasOverlayOptions: this.hasOverlayOptions(element), + isRemovable: isRemovable(element), + removeDisabledReason: this.getRemoveDisabledReason(element), + isClonable: isClonable(element), + cloneDisabledReason: this.getCloneDisabledReason(element), + optionsContainerTopButtons: this.getOptionsContainerTopButtons(element), + })); + } + + getPageContainers() { + return this.computeContainers(this.editable.querySelector("main")); + } + + getContainers() { + return this.lastContainers; + } + + hasOverlayOptions(el) { + for (const { hasOption, editableOnly } of this.getResource("has_overlay_options")) { + if (checkElement(el, { editableOnly }) && hasOption(el)) { + return true; + } + } + return false; + } + + getOptionsContainerTopButtons(el) { + const buttons = []; + for (const getContainerButtons of this.getResource("get_options_container_top_buttons")) { + buttons.push(...getContainerButtons(el)); + for (const button of buttons) { + const handler = button.handler; + button.handler = (...args) => { + this.dependencies.operation.next(async () => { + await handler(...args); + this.dependencies.history.addStep(); + }); + }; + } + } + return buttons; + } + + cleanForSave({ root }) { + for (const option of this.builderOptions) { + const { selector, exclude, cleanForSave } = option; + if (!cleanForSave) { + continue; + } + for (const el of getElementsWithOption(root, selector, exclude)) { + cleanForSave(el); + } + } + } + + restoreContainer(revertedStep) { + if (revertedStep && revertedStep.extraStepInfos.optionSelection) { + this.updateContainers(revertedStep.extraStepInfos.optionSelection); + } + } + getRemoveDisabledReason(el) { + const reasons = []; + this.dispatchTo("remove_disabled_reason_providers", { el, reasons }); + return reasons.length ? reasons.join(" ") : undefined; + } + getCloneDisabledReason(el) { + const reasons = []; + this.dispatchTo("clone_disabled_reason_providers", { el, reasons }); + return reasons.length ? reasons.join(" ") : undefined; + } +} + +function getClosestElements(element, selector) { + if (!element) { + // TODO we should remove it + return []; + } + const parent = element.closest(selector); + return parent ? [parent, ...getClosestElements(parent.parentElement, selector)] : []; +} + +/** + * Checks if the given element is valid in order to have an option. + * + * @param {HTMLElement} el + * @param {Boolean} editableOnly when set to false, the element does not need to + * be in an editable area and the checks are therefore lighter. + * (= previous data-no-check/noCheck) + * @param {String} exclude + * @returns {Boolean} + */ +export function checkElement(el, { editableOnly = true, exclude = "" }) { + // Unless specified otherwise, the element should be in an editable. + if (editableOnly && !el.closest(".o_editable")) { + return false; + } + // Check that the element is not to be excluded. + exclude += `${exclude && ", "}.o_snippet_not_selectable`; + if (el.matches(exclude)) { + return false; + } + // If an editable is not required, do not check anything else. + if (!editableOnly) { + return true; + } + // `o_editable_media` bypasses the `o_not_editable` class. + if (el.matches(".o_editable_media")) { + return shouldEditableMediaBeEditable(el); + } + return !el.matches('.o_not_editable:not(.s_social_media) :not([contenteditable="true"])'); +} diff --git a/addons/html_builder/static/src/core/builder_overlay/builder_overlay.js b/addons/html_builder/static/src/core/builder_overlay/builder_overlay.js new file mode 100644 index 0000000000000..9470370234c13 --- /dev/null +++ b/addons/html_builder/static/src/core/builder_overlay/builder_overlay.js @@ -0,0 +1,635 @@ +import { renderToElement } from "@web/core/utils/render"; +import { isMobileView } from "@html_builder/utils/utils"; +import { + addBackgroundGrid, + getGridProperties, + getGridItemProperties, + resizeGrid, + setElementToMaxZindex, +} from "@html_builder/utils/grid_layout_utils"; + +// TODO move them elsewhere. +export const sizingY = { + selector: "section, .row > div, .parallax, .s_hr, .carousel-item, .s_rating", + exclude: + "section:has(> .carousel), .s_image_gallery .carousel-item, .s_col_no_resize.row > div, .s_col_no_resize", +}; +export const sizingX = { + selector: ".row > div", + exclude: ".s_col_no_resize.row > div, .s_col_no_resize", +}; +export const sizingGrid = { + selector: ".row > div", + exclude: ".s_col_no_resize.row > div, .s_col_no_resize", +}; + +export class BuilderOverlay { + constructor(overlayTarget, { iframe, overlayContainer, history, hasOverlayOptions, next }) { + this.history = history; + this.next = next; + this.hasOverlayOptions = hasOverlayOptions; + this.iframe = iframe; + this.overlayContainer = overlayContainer; + this.overlayElement = renderToElement("html_builder.BuilderOverlay"); + this.overlayTarget = overlayTarget; + this.hasSizingHandles = this.hasSizingHandles(); + this.handlesWrapperEl = this.overlayElement.querySelector(".o_handles"); + this.handleEls = this.overlayElement.querySelectorAll(".o_handle"); + // Avoid "querySelectoring" the handles every time. + this.yHandles = this.handlesWrapperEl.querySelectorAll( + `.n:not(.o_grid_handle), .s:not(.o_grid_handle)` + ); + this.xHandles = this.handlesWrapperEl.querySelectorAll( + `.e:not(.o_grid_handle), .w:not(.o_grid_handle)` + ); + this.gridHandles = this.handlesWrapperEl.querySelectorAll(".o_grid_handle"); + + this.initHandles(); + this.initSizing(); + this.refreshHandles(); + } + + hasSizingHandles() { + return this.isResizableY() || this.isResizableX() || this.isResizableGrid(); + } + + // displayOverlayOptions(el) { + // // TODO when options will be more clear: + // // - moving + // // - timeline + // // (maybe other where `displayOverlayOptions: true`) + // } + + isActive() { + // TODO active still necessary ? (check when we have preview mode) + return this.overlayElement.matches(".oe_active, .o_we_overlay_preview"); + } + + refreshPosition() { + if (!this.isActive()) { + return; + } + + const openModalEl = this.overlayTarget.querySelector(".modal.show"); + const overlayTarget = openModalEl ? openModalEl : this.overlayTarget; + // TODO transform + const iframeRect = this.iframe.getBoundingClientRect(); + const overlayContainerRect = this.overlayContainer.getBoundingClientRect(); + const targetRect = overlayTarget.getBoundingClientRect(); + Object.assign(this.overlayElement.style, { + width: `${targetRect.width}px`, + height: `${targetRect.height}px`, + top: `${iframeRect.y + targetRect.y - overlayContainerRect.y + window.scrollY}px`, + left: `${iframeRect.x + targetRect.x - overlayContainerRect.x + window.scrollX}px`, + }); + this.handlesWrapperEl.style.height = `${targetRect.height}px`; + } + + refreshHandles() { + if (!this.hasSizingHandles || !this.isActive()) { + return; + } + + if (this.overlayTarget.parentNode?.classList.contains("row")) { + const isMobile = isMobileView(this.overlayTarget); + const isGridOn = this.overlayTarget.classList.contains("o_grid_item"); + const isGrid = !isMobile && isGridOn; + // Hiding/showing the correct resize handles if we are in grid mode + // or not. + this.handleEls.forEach((handleEl) => { + const isGridHandle = handleEl.classList.contains("o_grid_handle"); + handleEl.classList.toggle("d-none", isGrid ^ isGridHandle); + // Disabling the vertical resize if we are in mobile view. + const isVerticalSizing = handleEl.matches(".n, .s"); + handleEl.classList.toggle("readonly", isMobile && isVerticalSizing && isGridOn); + }); + } + + this.updateHandleY(); + } + + toggleOverlay(show) { + this.overlayElement.classList.toggle("oe_active", show); + this.refreshPosition(); + this.refreshHandles(); + } + + toggleOverlayPreview(show) { + this.overlayElement.classList.toggle("o_we_overlay_preview", show); + this.refreshPosition(); + this.refreshHandles(); + } + + toggleOverlayVisibility(show) { + if (!this.isActive()) { + return; + } + this.overlayElement.classList.toggle("o_overlay_hidden", !show); + } + + destroy() { + if (!this.hasSizingHandles) { + return; + } + + this.handleEls.forEach((handleEl) => + handleEl.removeEventListener("pointerdown", this._onSizingStart) + ); + } + + //-------------------------------------------------------------------------- + // Sizing + //-------------------------------------------------------------------------- + + isResizableY() { + return ( + this.overlayTarget.matches(sizingY.selector) && + !this.overlayTarget.matches(sizingY.exclude) + ); + } + + isResizableX() { + return ( + this.overlayTarget.matches(sizingX.selector) && + !this.overlayTarget.matches(sizingX.exclude) + ); + } + + isResizableGrid() { + return ( + this.overlayTarget.matches(sizingGrid.selector) && + !this.overlayTarget.matches(sizingGrid.exclude) + ); + } + + initHandles() { + if (this.isResizableY()) { + this.yHandles.forEach((handleEl) => handleEl.classList.remove("readonly")); + } + if (this.isResizableX()) { + this.xHandles.forEach((handleEl) => handleEl.classList.remove("readonly")); + } + if (this.isResizableGrid()) { + this.gridHandles.forEach((handleEl) => handleEl.classList.remove("readonly")); + } + } + + initSizing() { + if (!this.hasSizingHandles) { + return; + } + + this._onSizingStart = this.onSizingStart.bind(this); + this.handleEls.forEach((handleEl) => + handleEl.addEventListener("pointerdown", this._onSizingStart) + ); + } + + replaceSizingClass(classRegex, newClass) { + const newClassName = (this.overlayTarget.className || "").replace(classRegex, ""); + this.overlayTarget.className = newClassName; + this.overlayTarget.classList.add(newClass); + } + + getSizingYConfig() { + const isTargetHR = this.overlayTarget.matches("hr"); + const nClass = isTargetHR ? "mt" : "pt"; + const nProperty = isTargetHR ? "margin-top" : "padding-top"; + const sClass = isTargetHR ? "mb" : "pb"; + const sProperty = isTargetHR ? "margin-bottom" : "padding-bottom"; + + const values = [0, 4]; + for (let i = 1; i <= 256 / 8; i++) { + values.push(i * 8); + } + + return { + n: { classes: values.map((v) => nClass + v), values: values, cssProperty: nProperty }, + s: { classes: values.map((v) => sClass + v), values: values, cssProperty: sProperty }, + }; + } + + onResizeY(compass, initialClasses, currentIndex) { + this.updateHandleY(); + } + + updateHandleY() { + this.yHandles.forEach((handleEl) => { + const topOrBottom = handleEl.matches(".n") ? "top" : "bottom"; + const padding = window.getComputedStyle(this.overlayTarget)[`padding-${topOrBottom}`]; + handleEl.style.height = padding; // TODO outerHeight (deduce borders ?) + }); + } + + getSizingXConfig() { + const resolutionModifier = this.isMobile ? "" : "lg-"; + const rowWidth = this.overlayTarget.closest(".row").getBoundingClientRect().width; + const valuesE = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; + const valuesW = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; + return { + e: { + classes: valuesE.map((v) => `col-${resolutionModifier}${v}`), + values: valuesE.map((v) => (rowWidth / 12) * v), + cssProperty: "width", + }, + w: { + classes: valuesW.map((v) => `offset-${resolutionModifier}${v}`), + values: valuesW.map((v) => (rowWidth / 12) * v), + cssProperty: "margin-left", + }, + }; + } + + onResizeX(compass, initialClasses, currentIndex) { + const resolutionModifier = this.isMobile ? "" : "lg-"; + // (?!\S): following char cannot be a non-space character + const offsetRegex = new RegExp(`(?:^|\\s+)offset-${resolutionModifier}(\\d{1,2})(?!\\S)`); + const colRegex = new RegExp(`(?:^|\\s+)col-${resolutionModifier}(\\d{1,2})(?!\\S)`); + + const initialOffset = Number(initialClasses.match(offsetRegex)?.[1] || 0); + + if (compass === "w") { + // Replacing the col class so the right border does not move when we + // change the offset. + const initialCol = Number(initialClasses.match(colRegex)?.[1] || 12); + let offset = Number(this.overlayTarget.className.match(offsetRegex)?.[1] || 0); + const offsetClass = `offset-${resolutionModifier}${offset}`; + + let colSize = initialCol - (offset - initialOffset); + if (colSize <= 0) { + colSize = 1; + offset = initialOffset + initialCol - 1; + } + this.overlayTarget.classList.remove(offsetClass); + this.replaceSizingClass(colRegex, `col-${resolutionModifier}${colSize}`); + if (offset > 0) { + this.overlayTarget.classList.add(`offset-${resolutionModifier}${offset}`); + } + + // Add/remove the `offset-lg-0` class when needed. + if (this.isMobile && offset === 0) { + this.overlayTarget.classList.remove("offset-lg-0"); + } else { + const className = this.overlayTarget.className; + const hasDesktopClass = !!className.match(/(^|\s+)offset-lg-\d{1,2}(?!\S)/); + const hasMobileClass = !!className.match(/(^|\s+)offset-\d{1,2}(?!\S)/); + if ( + (this.isMobile && offset > 0 && !hasDesktopClass) || + (!this.isMobile && offset === 0 && hasMobileClass) + ) { + this.overlayTarget.classList.add("offset-lg-0"); + } + } + } else if (initialOffset > 0) { + const col = Number(this.overlayTarget.className.match(colRegex)?.[1] || 0); + // Avoid overflowing to the right if the column size + the offset + // exceeds 12. + if (col + initialOffset > 12) { + this.replaceSizingClass(colRegex, `col-${resolutionModifier}${12 - initialOffset}`); + } + } + } + + getSizingGridConfig() { + const rowEl = this.overlayTarget.closest(".row"); + const gridProp = getGridProperties(rowEl); + const { rowStart, rowEnd, columnStart, columnEnd } = getGridItemProperties( + this.overlayTarget + ); + + const valuesN = []; + const valuesS = []; + for (let i = 1; i < parseInt(rowEnd) + 12; i++) { + valuesN.push(i); + valuesS.push(i + 1); + } + const valuesW = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; + const valuesE = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; + + return { + n: { + classes: valuesN.map((v) => "g-height-" + (rowEnd - v)), + values: valuesN.map((v) => (gridProp.rowSize + gridProp.rowGap) * (v - 1)), + cssProperty: "grid-row-start", + }, + s: { + classes: valuesS.map((v) => "g-height-" + (v - rowStart)), + values: valuesS.map((v) => (gridProp.rowSize + gridProp.rowGap) * (v - 1)), + cssProperty: "grid-row-end", + }, + w: { + classes: valuesW.map((v) => "g-col-lg-" + (columnEnd - v)), + values: valuesW.map((v) => (gridProp.columnSize + gridProp.columnGap) * (v - 1)), + cssProperty: "grid-column-start", + }, + e: { + classes: valuesE.map((v) => "g-col-lg-" + (v - columnStart)), + values: valuesE.map((v) => (gridProp.columnSize + gridProp.columnGap) * (v - 1)), + cssProperty: "grid-column-end", + }, + }; + } + + onResizeGrid(compass, initialClasses, currentIndex) { + const style = this.overlayTarget.style; + if (compass === "n") { + const rowEnd = parseInt(style.gridRowEnd); + if (currentIndex < 0) { + style.gridRowStart = 1; + } else if (currentIndex + 1 >= rowEnd) { + style.gridRowStart = rowEnd - 1; + } else { + style.gridRowStart = currentIndex + 1; + } + } else if (compass === "s") { + const rowStart = parseInt(style.gridRowStart); + const rowEnd = parseInt(style.gridRowEnd); + if (currentIndex + 2 <= rowStart) { + style.gridRowEnd = rowStart + 1; + } else { + style.gridRowEnd = currentIndex + 2; + } + + // Updating the grid height. + const rowEl = this.overlayTarget.parentNode; + const rowCount = parseInt(rowEl.dataset.rowCount); + const backgroundGridEl = rowEl.querySelector(".o_we_background_grid"); + const backgroundGridRowEnd = parseInt(backgroundGridEl.style.gridRowEnd); + let rowMove = 0; + if (style.gridRowEnd > rowEnd && style.gridRowEnd > rowCount + 1) { + rowMove = style.gridRowEnd - rowEnd; + } else if (style.gridRowEnd < rowEnd && style.gridRowEnd >= rowCount + 1) { + rowMove = style.gridRowEnd - rowEnd; + } + backgroundGridEl.style.gridRowEnd = backgroundGridRowEnd + rowMove; + } else if (compass === "w") { + const columnEnd = parseInt(style.gridColumnEnd); + if (currentIndex < 0) { + style.gridColumnStart = 1; + } else if (currentIndex + 1 >= columnEnd) { + style.gridColumnStart = columnEnd - 1; + } else { + style.gridColumnStart = currentIndex + 1; + } + } else if (compass === "e") { + const columnStart = parseInt(style.gridColumnStart); + if (currentIndex + 2 > 13) { + style.gridColumnEnd = 13; + } else if (currentIndex + 2 <= columnStart) { + style.gridColumnEnd = columnStart + 1; + } else { + style.gridColumnEnd = currentIndex + 2; + } + } + + if (compass === "n" || compass === "s") { + const numberRows = style.gridRowEnd - style.gridRowStart; + this.replaceSizingClass(/\s*(g-height-)([0-9-]+)/g, `g-height-${numberRows}`); + } + + if (compass === "w" || compass === "e") { + const numberColumns = style.gridColumnEnd - style.gridColumnStart; + this.replaceSizingClass(/\s*(g-col-lg-)([0-9-]+)/g, `g-col-lg-${numberColumns}`); + } + } + + getDirections(ev, handleEl, sizingConfig) { + let compass = false; + let XY = false; + if (handleEl.matches(".n")) { + compass = "n"; + XY = "Y"; + } else if (handleEl.matches(".s")) { + compass = "s"; + XY = "Y"; + } else if (handleEl.matches(".e")) { + compass = "e"; + XY = "X"; + } else if (handleEl.matches(".w")) { + compass = "w"; + XY = "X"; + } else if (handleEl.matches(".nw")) { + compass = "nw"; + XY = "YX"; + } else if (handleEl.matches(".ne")) { + compass = "ne"; + XY = "YX"; + } else if (handleEl.matches(".sw")) { + compass = "sw"; + XY = "YX"; + } else if (handleEl.matches(".se")) { + compass = "se"; + XY = "YX"; + } + + const currentConfig = []; + for (let i = 0; i < compass.length; i++) { + currentConfig.push(sizingConfig[compass[i]]); + } + + const directions = []; + for (const [i, config] of currentConfig.entries()) { + // Compute the current index based on the current class/style. + let currentIndex = 0; + const cssProperty = config.cssProperty; + const cssPropertyValue = parseInt( + window.getComputedStyle(this.overlayTarget)[cssProperty] + ); + config.classes.forEach((c, index) => { + if (this.overlayTarget.classList.contains(c)) { + currentIndex = index; + } else if (config.values[index] === cssPropertyValue) { + currentIndex = index; + } + }); + + directions.push({ + config, + currentIndex, + initialIndex: currentIndex, + initialClasses: this.overlayTarget.className, + classRegex: new RegExp( + "\\s*" + config.classes[currentIndex].replace(/[-]*[0-9]+/, "[-]*[0-9]+"), + "g" + ), + initialPageXY: ev["page" + XY[i]], + XY: XY[i], + compass: compass[i], + }); + } + + return directions; + } + + onSizingStart(ev) { + ev.preventDefault(); + const pointerDownTime = ev.timeStamp; + + // Lock the mutex. + let sizingResolve; + this.next( + async () => { + await new Promise((resolve) => (sizingResolve = () => resolve())); + }, + { withLoadingEffect: false } + ); + const cancelSizing = this.history.makeSavePoint(); + + const handleEl = ev.currentTarget; + const isGridHandle = handleEl.classList.contains("o_grid_handle"); + this.isMobile = isMobileView(this.overlayTarget); + + // If we are in grid mode, add a background grid and place it in front + // of the other elements. + let rowEl, backgroundGridEl; + if (isGridHandle) { + rowEl = this.overlayTarget.parentNode; + backgroundGridEl = addBackgroundGrid(rowEl, 0); + setElementToMaxZindex(backgroundGridEl, rowEl); + } + + let sizingConfig, onResize; + if (isGridHandle) { + sizingConfig = this.getSizingGridConfig(); + onResize = this.onResizeGrid.bind(this); + } else if (handleEl.matches(".n, .s")) { + sizingConfig = this.getSizingYConfig(); + onResize = this.onResizeY.bind(this); + } else { + sizingConfig = this.getSizingXConfig(); + onResize = this.onResizeX.bind(this); + } + + const directions = this.getDirections(ev, handleEl, sizingConfig); + + // Set the cursor. + const cursorClass = `${window.getComputedStyle(handleEl)["cursor"]}-important`; + window.document.body.classList.add(cursorClass); + // Prevent the iframe from absorbing the pointer events. + const iframeEl = this.overlayTarget.ownerDocument.defaultView.frameElement; + iframeEl.classList.add("o_resizing"); + + this.overlayElement.classList.remove("o_handlers_idle"); + + const onSizingMove = (ev) => { + for (const dir of directions) { + const configValues = dir.config.values; + const currentIndex = dir.currentIndex; + const currentValue = configValues[currentIndex]; + + // Get the number of pixels by which the pointer moved, compared + // to the initial position of the handle. + const delta = + ev[`page${dir.XY}`] - dir.initialPageXY + configValues[dir.initialIndex]; + + // Compute the indexes of the next step and the step before it, + // based on the delta. + let nextIndex, beforeIndex; + if (delta > currentValue) { + const nextValue = configValues.find((v) => v > delta); + nextIndex = nextValue + ? configValues.indexOf(nextValue) + : configValues.length - 1; + beforeIndex = nextIndex > 0 ? nextIndex - 1 : currentIndex; + } else if (delta < currentValue) { + const nextValue = configValues.findLast((v) => v < delta); + nextIndex = nextValue ? configValues.indexOf(nextValue) : 0; + beforeIndex = + nextIndex < configValues.length - 1 ? nextIndex + 1 : currentIndex; + } + + let change = false; + if (delta !== currentValue) { + // First, catch up with the pointer (in the case we moved + // really fast). + if (beforeIndex !== currentIndex) { + this.replaceSizingClass(dir.classRegex, dir.config.classes[beforeIndex]); + dir.currentIndex = beforeIndex; + change = true; + } + // If the pointer moved by at least 2/3 of the space between + // the current and the next step, the handle is snapped to + // the next step and the class is replaced by the one + // matching this step. + const threshold = + (2 * configValues[nextIndex] + configValues[dir.currentIndex]) / 3; + if ( + (delta > currentValue && delta > threshold) || + (delta < currentValue && delta < threshold) + ) { + this.replaceSizingClass(dir.classRegex, dir.config.classes[nextIndex]); + dir.currentIndex = nextIndex; + change = true; + } + } + + if (change) { + onResize(dir.compass, dir.initialClasses, dir.currentIndex); + // TODO notify other options (e.g. steps) + } + } + }; + + const onSizingStop = (ev) => { + ev.preventDefault(); + window.removeEventListener("pointermove", onSizingMove); + window.removeEventListener("pointerup", onSizingStop); + window.document.body.classList.remove(cursorClass); + iframeEl.classList.remove("o_resizing"); + this.overlayElement.classList.add("o_handlers_idle"); + + // If we are in grid mode, removes the background grid. + // Also sync the col-* class with the g-col-* class so the + // toggle to normal mode and the mobile view are well done. + if (isGridHandle) { + backgroundGridEl.remove(); + resizeGrid(rowEl); + + const colClass = [...this.overlayTarget.classList].find((c) => /^col-/.test(c)); + const gColClass = [...this.overlayTarget.classList].find((c) => /^g-col-/.test(c)); + this.overlayTarget.classList.remove(colClass); + this.overlayTarget.classList.add(gColClass.substring(2)); + } + + // Cancel the sizing if the element was not resized (to not have + // mutations). + const wasResized = !directions.every((dir) => dir.initialIndex === dir.currentIndex); + if (wasResized) { + this.history.addStep(); + } else { + cancelSizing(); + } + + // Free the mutex. + sizingResolve(); + + // If no resizing happened and if the pointer was down less than + // 500 ms, we assume that the user wanted to click on the element + // behind the handle. + if (!wasResized) { + const pointerUpTime = ev.timeStamp; + const pointerDownDuration = pointerUpTime - pointerDownTime; + if (pointerDownDuration < 500) { + // Find the first element behind the overlay. + const sameCoordinatesEls = this.overlayTarget.ownerDocument.elementsFromPoint( + ev.pageX, + ev.pageY + ); + // Check if it has native JS `click` function + const toBeClickedEl = sameCoordinatesEls.find( + (el) => + !this.overlayContainer.contains(el) && + !el.matches(".o_loading_screen") && + typeof el.click === "function" + ); + if (toBeClickedEl) { + toBeClickedEl.click(); + } + } + } + }; + + window.addEventListener("pointermove", onSizingMove); + window.addEventListener("pointerup", onSizingStop); + } +} diff --git a/addons/html_builder/static/src/core/builder_overlay/builder_overlay.scss b/addons/html_builder/static/src/core/builder_overlay/builder_overlay.scss new file mode 100644 index 0000000000000..57e0edf9c4eb6 --- /dev/null +++ b/addons/html_builder/static/src/core/builder_overlay/builder_overlay.scss @@ -0,0 +1,252 @@ +div[data-oe-local-overlay-id="builder-overlay-container"] { + position: absolute; + pointer-events: none; + + .oe_overlay { + @include o-position-absolute; + display: none; + border-color: $o-we-handles-accent-color; + background: transparent; + text-align: center; + font-size: 16px; + transition: opacity 400ms linear 0s; + + &.o_overlay_hidden { + opacity: 0 !important; + transition: none; + } + + &.oe_active, + &.o_we_overlay_preview { + display: block; + z-index: 1; + } + + &.o_we_overlay_preview { + transition: none; + } + + // HANDLES + .o_handles { + @include o-position-absolute(-$o-we-handles-offset-to-hide, 0, auto, 0); + border-color: inherit; + pointer-events: auto; + + > .o_handle { + position: absolute; + + &.o_side_y { + height: $o-we-handle-edge-size; + } + &.o_side_x { + width: $o-we-handle-edge-size; + } + &.w { + inset: $o-we-handles-offset-to-hide auto $o-we-handles-offset-to-hide * -1 $o-we-handle-border-width * 0.5; + transform: translateX(-50%); + cursor: ew-resize; + } + &.e { + inset: $o-we-handles-offset-to-hide $o-we-handle-border-width * 0.5 $o-we-handles-offset-to-hide * -1 auto; + transform: translateX(50%); + cursor: ew-resize; + } + &.n { + inset: $o-we-handles-offset-to-hide 0 auto 0; + cursor: ns-resize; + + &.o_grid_handle { + transform: translateY(-50%); + + &:before { + transform: translateY($o-we-handle-border-width * 0.5); + } + } + } + &.s { + inset: auto 0 $o-we-handles-offset-to-hide * -1 0; + cursor: ns-resize; + + &.o_grid_handle { + transform: translateY(50%); + + &:before { + transform: translateY($o-we-handle-border-width * -0.5); + } + } + } + &.ne { + inset: ($o-we-handles-offset-to-hide + $o-we-handle-border-width * 0.5) $o-we-handle-border-width * 0.5 auto auto; + transform: translate(50%, -50%); + cursor: nesw-resize; + } + &.se { + inset: auto $o-we-handle-border-width * 0.5 ($o-we-handles-offset-to-hide * -1 + $o-we-handle-border-width * 0.5) auto; + transform: translate(50%, 50%); + cursor: nwse-resize; + } + &.sw { + inset: auto auto ($o-we-handles-offset-to-hide * -1 + $o-we-handle-border-width * 0.5) $o-we-handle-border-width * 0.5; + transform: translate(-50%, 50%); + cursor: nesw-resize; + } + &.nw { + inset: ($o-we-handles-offset-to-hide + $o-we-handle-border-width * 0.5) auto auto $o-we-handle-border-width * 0.5; + transform: translate(-50%, -50%); + cursor: nwse-resize; + } + .o_handle_indicator { + position: absolute; + inset: $o-we-handles-btn-size * -0.5; + display: block; + width: $o-we-handles-btn-size; + height: $o-we-handles-btn-size; + margin: auto; + border: solid $o-we-handle-border-width $o-we-handles-accent-color; + border-radius: $o-we-handles-btn-size; + background: $o-we-fg-lighter; + outline: $o-we-handle-inside-line-width solid $o-we-fg-lighter; + outline-offset: -($o-we-handles-btn-size * 0.5); + transition: $transition-base; + + &::before { + content: ''; + position: absolute; + inset: -$o-we-handles-btn-size; + display: block; + border-radius: inherit; + } + } + + &.o_column_handle.o_side_y { + background-color: rgba($o-we-handles-accent-color, .1); + + &::after { + content: ''; + position: absolute; + height: $o-we-handles-btn-size; + } + &.n { + border-bottom: dashed $o-we-handle-border-width * 0.5 rgba($o-we-handles-accent-color, 0.5); + + &::after { + inset: 0 0 auto 0; + transform: translateY(-50%); + } + } + &.s { + border-top: dashed $o-we-handle-border-width * 0.5 rgba($o-we-handles-accent-color, 0.5); + + &::after { + inset: auto 0 0 0; + transform: translateY(50%); + } + } + } + &.o_side { + &::before { + content: ''; + position: absolute; + inset: 0; + background: $o-we-handles-accent-color; + } + &.o_side_x { + + &::before { + width: $o-we-handle-border-width; + margin: 0 auto; + } + } + &.o_side_y { + + &::before { + height: $o-we-handle-border-width; + margin: auto 0; + } + } + &.o_column_handle { + + &.n::before { + margin: 0 auto auto; + } + + &.s::before { + margin: auto auto 0; + } + } + } + + &.readonly { + cursor: default; + pointer-events: none; + + &.o_column_handle.o_side_y { + border: none; + background: none; + } + + &::after, .o_handle_indicator { + display: none; + } + } + } + } + + // HANDLES - ACTIVE AND HOVER STATES + // By using `o_handlers_idle` class, we can avoid hovering another + // handle when we're already dragging another one. + &.o_handlers_idle .o_handle:hover, .o_handle:active { + + .o_handle_indicator { + outline-color: $o-we-handles-accent-color; + } + } + + &.o_handlers_idle .o_corner_handle:hover, .o_corner_handle:active { + + .o_handle_indicator { + transform: scale(1.25); + } + } + + &.o_handlers_idle .o_column_handle.o_side_y:hover, .o_column_handle.o_side_y:active { + background: repeating-linear-gradient( + 45deg, + rgba($o-we-handles-accent-color, .1), + rgba($o-we-handles-accent-color, .1) 5px, + darken(rgba($o-we-handles-accent-color, .25), 5%) 5px, + darken(rgba($o-we-handles-accent-color, .25), 5%) 10px + ); + } + + &.o_handlers_idle .o_side_x:hover, .o_side_x:active { + + &::before { + width: $o-we-handle-border-width * 2; + } + .o_handle_indicator { + height: $o-we-handles-btn-size * 2; + } + } + + &.o_handlers_idle .o_side_y:hover, .o_side_y:active { + + &::before { + height: $o-we-handle-border-width * 2; + } + .o_handle_indicator { + width: $o-we-handles-btn-size * 2; + } + } + } +} + +@each $cursor in (nesw-resize, nwse-resize, ns-resize, ew-resize, move) { + .#{$cursor}-important * { + cursor: $cursor !important; + } +} + +.o_resizing { + pointer-events: none; +} diff --git a/addons/html_builder/static/src/core/builder_overlay/builder_overlay.xml b/addons/html_builder/static/src/core/builder_overlay/builder_overlay.xml new file mode 100644 index 0000000000000..1fdea3ec48062 --- /dev/null +++ b/addons/html_builder/static/src/core/builder_overlay/builder_overlay.xml @@ -0,0 +1,50 @@ + + + + +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + diff --git a/addons/html_builder/static/src/core/builder_overlay/builder_overlay_plugin.js b/addons/html_builder/static/src/core/builder_overlay/builder_overlay_plugin.js new file mode 100644 index 0000000000000..c2022afb62542 --- /dev/null +++ b/addons/html_builder/static/src/core/builder_overlay/builder_overlay_plugin.js @@ -0,0 +1,165 @@ +import { Plugin } from "@html_editor/plugin"; +import { throttleForAnimation } from "@web/core/utils/timing"; +import { getScrollingElement, getScrollingTarget } from "@web/core/utils/scrolling"; +import { checkElement } from "../builder_options_plugin"; +import { BuilderOverlay, sizingY, sizingX, sizingGrid } from "./builder_overlay"; + +function isResizable(el) { + const isResizableY = el.matches(sizingY.selector) && !el.matches(sizingY.exclude); + const isResizableX = el.matches(sizingX.selector) && !el.matches(sizingX.exclude); + const isResizableGrid = el.matches(sizingGrid.selector) && !el.matches(sizingGrid.exclude); + return isResizableY || isResizableX || isResizableGrid; +} + +export class BuilderOverlayPlugin extends Plugin { + static id = "builderOverlay"; + static dependencies = ["localOverlay", "history", "operation"]; + static shared = ["showOverlayPreview", "hideOverlayPreview"]; + resources = { + step_added_handlers: this.refreshOverlays.bind(this), + change_current_options_containers_listeners: this.openBuilderOverlays.bind(this), + on_mobile_preview_clicked: this.refreshOverlays.bind(this), + has_overlay_options: { hasOption: (el) => isResizable(el) }, + }; + + setup() { + // TODO find how to not overflow the mobile preview. + this.iframe = this.editable.ownerDocument.defaultView.frameElement; + this.overlayContainer = this.dependencies.localOverlay.makeLocalOverlay( + "builder-overlay-container" + ); + /** @type {[BuilderOverlay]} */ + this.overlays = []; + // Refresh the overlays position everytime their target size changes. + this.resizeObserver = new ResizeObserver(() => this.refreshPositions()); + + this._refreshOverlays = throttleForAnimation(this.refreshOverlays.bind(this)); + + // Recompute the overlay when the window is resized. + this.addDomListener(window, "resize", this._refreshOverlays); + + // On keydown, hide the overlay and then show it again when the mouse + // moves. + const onMouseMoveOrDown = throttleForAnimation((ev) => { + this.toggleOverlaysVisibility(true); + this.refreshPositions(); + ev.currentTarget.removeEventListener("mousemove", onMouseMoveOrDown); + ev.currentTarget.removeEventListener("mousedown", onMouseMoveOrDown); + }); + this.addDomListener(this.editable, "keydown", (ev) => { + this.toggleOverlaysVisibility(false); + ev.currentTarget.addEventListener("mousemove", onMouseMoveOrDown); + ev.currentTarget.addEventListener("mousedown", onMouseMoveOrDown); + }); + + // Hide the overlay when scrolling. Show it again when the scroll is + // over and recompute its position. + const scrollingElement = getScrollingElement(this.document); + const scrollingTarget = getScrollingTarget(scrollingElement); + this.addDomListener( + scrollingTarget, + "scroll", + throttleForAnimation(() => { + this.toggleOverlaysVisibility(false); + clearTimeout(this.scrollingTimeout); + this.scrollingTimeout = setTimeout(() => { + this.toggleOverlaysVisibility(true); + this.refreshPositions(); + }, 250); + }), + { capture: true } + ); + + this._cleanups.push(() => { + this.removeBuilderOverlays(); + this.resizeObserver.disconnect(); + }); + } + + openBuilderOverlays(optionsContainer) { + this.removeBuilderOverlays(); + if (!optionsContainer.length) { + return; + } + + // Create the overlays. + optionsContainer.forEach((option) => { + const overlay = new BuilderOverlay(option.element, { + iframe: this.iframe, + overlayContainer: this.overlayContainer, + history: this.dependencies.history, + hasOverlayOptions: checkElement(option.element, {}) && option.hasOverlayOptions, + next: this.dependencies.operation.next, + }); + this.overlays.push(overlay); + this.overlayContainer.append(overlay.overlayElement); + this.resizeObserver.observe(overlay.overlayTarget, { box: "border-box" }); + }); + + // Activate the last overlay. + const innermostOverlay = this.overlays.at(-1); + innermostOverlay.toggleOverlay(true); + + // Also activate the closest overlay that should have overlay options. + if (!innermostOverlay.hasOverlayOptions) { + for (let i = this.overlays.length - 2; i >= 0; i--) { + const parentOverlay = this.overlays[i]; + if (parentOverlay.hasOverlayOptions) { + parentOverlay.toggleOverlay(true); + break; + } + } + } + } + + removeBuilderOverlays() { + this.overlays.forEach((overlay) => { + overlay.destroy(); + overlay.overlayElement.remove(); + this.resizeObserver.unobserve(overlay.overlayTarget); + }); + this.overlays = []; + } + + refreshOverlays() { + this.overlays.forEach((overlay) => { + overlay.refreshPosition(); + overlay.refreshHandles(); + }); + } + + refreshPositions() { + this.overlays.forEach((overlay) => { + overlay.refreshPosition(); + }); + } + + toggleOverlaysVisibility(show) { + this.overlays.forEach((overlay) => { + overlay.toggleOverlayVisibility(show); + }); + } + + showOverlayPreview(el) { + // Hide all the active overlays. + this.toggleOverlaysVisibility(false); + // Show the preview of the one corresponding to the given element. + const overlayToShow = this.overlays.find((overlay) => overlay.overlayTarget === el); + if (!overlayToShow) { + return; + } + overlayToShow.toggleOverlayPreview(true); + overlayToShow.toggleOverlayVisibility(true); + } + + hideOverlayPreview(el) { + // Remove the preview. + const overlayToHide = this.overlays.find((overlay) => overlay.overlayTarget === el); + if (!overlayToHide) { + return; + } + overlayToHide.toggleOverlayPreview(false); + // Show back the active overlays. + this.toggleOverlaysVisibility(true); + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/basic_many2many.js b/addons/html_builder/static/src/core/building_blocks/basic_many2many.js new file mode 100644 index 0000000000000..f4cc981d42d30 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/basic_many2many.js @@ -0,0 +1,25 @@ +import { Component } from "@odoo/owl"; +import { basicContainerBuilderComponentProps } from "../utils"; +import { SelectMany2X } from "./select_many2x"; + +export class BasicMany2Many extends Component { + static template = "html_builder.BasicMany2Many"; + static props = { + ...basicContainerBuilderComponentProps, + model: String, + fields: { type: Array, element: String, optional: true }, + domain: { type: Array, optional: true }, + limit: { type: Number, optional: true }, + selection: { type: Array, element: Object }, + setSelection: Function, + create: { type: Function, optional: true }, + }; + static components = { SelectMany2X }; + + select(entry) { + this.props.setSelection([...this.props.selection, entry]); + } + unselect(id) { + this.props.setSelection([...this.props.selection.filter((item) => item.id !== id)]); + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml b/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml new file mode 100644 index 0000000000000..ff0242febbf7d --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml @@ -0,0 +1,28 @@ + + + + +
+ + + + + +
+ + +
+ +
+ + + diff --git a/addons/html_builder/static/src/core/building_blocks/basic_many2one.js b/addons/html_builder/static/src/core/building_blocks/basic_many2one.js new file mode 100644 index 0000000000000..9997e6e410986 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/basic_many2one.js @@ -0,0 +1,45 @@ +import { Component, onWillStart, onWillUpdateProps } from "@odoo/owl"; +import { basicContainerBuilderComponentProps } from "../utils"; +import { useCachedModel } from "@html_builder/core/cached_model_utils"; +import { SelectMany2X } from "./select_many2x"; + +export class BasicMany2One extends Component { + static template = "html_builder.BasicMany2One"; + static props = { + ...basicContainerBuilderComponentProps, + model: String, + fields: { type: Array, element: String, optional: true }, + domain: { type: Array, optional: true }, + limit: { type: Number, optional: true }, + selected: { type: Object, optional: true }, + select: Function, + unselect: { type: Function, optional: true }, + defaultMessage: { type: String, optional: true }, + create: { type: Function, optional: true }, + }; + static components = { SelectMany2X }; + + setup() { + this.cachedModel = useCachedModel(); + onWillStart(async () => { + await this.handleProps(this.props); + }); + onWillUpdateProps(async (newProps) => { + await this.handleProps(newProps); + }); + } + async handleProps(props) { + if (props.selected && !("display_name" in props.selected && "name" in props.selected)) { + Object.assign( + props.selected, + ( + await this.cachedModel.ormRead( + this.props.model, + [props.selected.id], + ["display_name", "name"] + ) + )[0] + ); + } + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/basic_many2one.xml b/addons/html_builder/static/src/core/building_blocks/basic_many2one.xml new file mode 100644 index 0000000000000..84acb5813c155 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/basic_many2one.xml @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/addons/html_builder/static/src/core/building_blocks/builder_button_group.js b/addons/html_builder/static/src/core/building_blocks/builder_button_group.js new file mode 100644 index 0000000000000..0941b49196867 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_button_group.js @@ -0,0 +1,23 @@ +import { Component } from "@odoo/owl"; +import { + basicContainerBuilderComponentProps, + useVisibilityObserver, + useApplyVisibility, + useSelectableComponent, +} from "../utils"; +import { BuilderComponent } from "./builder_component"; + +export class BuilderButtonGroup extends Component { + static template = "html_builder.BuilderButtonGroup"; + static props = { + ...basicContainerBuilderComponentProps, + slots: { type: Object, optional: true }, + }; + static components = { BuilderComponent }; + + setup() { + useVisibilityObserver("root", useApplyVisibility("root")); + + useSelectableComponent(this.props.id); + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/builder_button_group.xml b/addons/html_builder/static/src/core/building_blocks/builder_button_group.xml new file mode 100644 index 0000000000000..5d085f7896205 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_button_group.xml @@ -0,0 +1,12 @@ + + + + + +
+ +
+ + + + diff --git a/addons/html_builder/static/src/core/building_blocks/builder_checkbox.js b/addons/html_builder/static/src/core/building_blocks/builder_checkbox.js new file mode 100644 index 0000000000000..25801aa703750 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_checkbox.js @@ -0,0 +1,37 @@ +import { Component } from "@odoo/owl"; +import { CheckBox } from "@web/core/checkbox/checkbox"; +import { + clickableBuilderComponentProps, + useActionInfo, + useClickableBuilderComponent, + useDependencyDefinition, + useDomState, +} from "../utils"; +import { BuilderComponent } from "./builder_component"; + +export class BuilderCheckbox extends Component { + static template = "html_builder.BuilderCheckbox"; + static components = { BuilderComponent, CheckBox }; + static props = { + ...clickableBuilderComponentProps, + }; + + setup() { + this.info = useActionInfo(); + const { operation, isApplied, onReady } = useClickableBuilderComponent(); + if (this.props.id) { + useDependencyDefinition(this.props.id, { isActive: isApplied }, { onReady }); + } + this.state = useDomState( + () => ({ + isActive: isApplied(), + }), + { onReady } + ); + this.onChange = operation.commit; + } + + getClassName() { + return "o_field_boolean o_boolean_toggle form-switch"; + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/builder_checkbox.xml b/addons/html_builder/static/src/core/building_blocks/builder_checkbox.xml new file mode 100644 index 0000000000000..1bc30f02adfc6 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_checkbox.xml @@ -0,0 +1,20 @@ + + + + + +
+ +
+ + + + diff --git a/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js b/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js new file mode 100644 index 0000000000000..3dc3bcd408e11 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js @@ -0,0 +1,130 @@ +import { ColorSelector } from "@html_editor/main/font/color_selector"; +import { Component, useComponent, useRef } from "@odoo/owl"; +import { useColorPicker } from "@web/core/color_picker/color_picker"; +import { BuilderComponent } from "./builder_component"; +import { + basicContainerBuilderComponentProps, + getAllActionsAndOperations, + useBuilderComponent, + useDomState, + useHasPreview, +} from "../utils"; +import { isColorGradient } from "@web/core/utils/colors"; + +// TODO replace by useInputBuilderComponent after extract unit by AGAU +export function useColorPickerBuilderComponent() { + const comp = useComponent(); + const { getAllActions, callOperation } = getAllActionsAndOperations(comp); + const getAction = comp.env.editor.shared.builderActions.getAction; + const state = useDomState(getState); + const applyOperation = comp.env.editor.shared.history.makePreviewableAsyncOperation( + (applySpecs) => { + const proms = []; + for (const applySpec of applySpecs) { + proms.push( + applySpec.apply({ + editingElement: applySpec.editingElement, + param: applySpec.actionParam, + value: applySpec.actionValue, + loadResult: applySpec.loadResult, + dependencyManager: comp.env.dependencyManager, + }) + ); + } + return Promise.all(proms); + } + ); + function getState(editingElement) { + // if (!editingElement || !editingElement.isConnected) { + // // TODO try to remove it. We need to move hook in BuilderComponent + // return {}; + // } + const actionWithGetValue = getAllActions().find( + ({ actionId }) => getAction(actionId).getValue + ); + const { actionId, actionParam } = actionWithGetValue; + const actionValue = getAction(actionId).getValue({ editingElement, param: actionParam }); + return { + selectedColor: actionValue || "#FFFFFF00", + }; + } + function getColor(colorValue) { + return colorValue.startsWith("color-prefix-") + ? `var(${colorValue.replace("color-prefix-", "--")})` + : colorValue; + } + + function onApply(colorValue) { + callOperation(applyOperation.commit, { userInputValue: getColor(colorValue) }); + } + let onPreview = (colorValue) => { + callOperation(applyOperation.preview, { + userInputValue: getColor(colorValue), + operationParams: { + cancellable: true, + cancelPrevious: () => applyOperation.revert(), + }, + }); + }; + const hasPreview = useHasPreview(getAllActions); + if (!hasPreview) { + onPreview = () => {}; + } + return { + state, + onApply, + onPreview, + onPreviewRevert: () => applyOperation.revert(), + }; +} + +export class BuilderColorPicker extends Component { + static template = "html_builder.BuilderColorPicker"; + static props = { + ...basicContainerBuilderComponentProps, + noTransparency: { type: Boolean, optional: true }, + enabledTabs: { type: Array, optional: true }, + unit: { type: String, optional: true }, + title: { type: String, optional: true }, + getUsedCustomColors: { type: Function, optional: true }, + selectedTab: { type: String, optional: true }, + }; + static defaultProps = { + getUsedCustomColors: () => [], + }; + static components = { + ColorSelector: ColorSelector, + BuilderComponent, + }; + + setup() { + useBuilderComponent(); + const { state, onApply, onPreview, onPreviewRevert } = useColorPickerBuilderComponent(); + this.colorButton = useRef("colorButton"); + this.state = state; + this.state.defaultTab = this.props.selectedTab || "solid"; // TODO: select the correct tab based on the color + useColorPicker( + "colorButton", + { + state, + applyColor: onApply, + applyColorPreview: onPreview, + applyColorResetPreview: onPreviewRevert, + getUsedCustomColors: this.props.getUsedCustomColors, + colorPrefix: "color-prefix-", + noTransparency: this.props.noTransparency, + enabledTabs: this.props.enabledTabs, + }, + { + onClose: onPreviewRevert, + } + ); + } + + getSelectedColorStyle() { + if (isColorGradient(this.state.selectedColor)) { + return `background-image: ${this.state.selectedColor}`; + } + return `background-color: ${this.state.selectedColor}`; + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.xml b/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.xml new file mode 100644 index 0000000000000..4424320bf2197 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.xml @@ -0,0 +1,10 @@ + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/core/building_blocks/builder_select_item.js b/addons/html_builder/static/src/core/building_blocks/builder_select_item.js new file mode 100644 index 0000000000000..a3ba7e426a010 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_select_item.js @@ -0,0 +1,73 @@ +import { Component, onMounted, useRef } from "@odoo/owl"; +import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service"; +import { + clickableBuilderComponentProps, + useActionInfo, + useSelectableItemComponent, +} from "../utils"; +import { BuilderComponent } from "./builder_component"; + +export class BuilderSelectItem extends Component { + static template = "html_builder.BuilderSelectItem"; + static props = { + ...clickableBuilderComponentProps, + title: { type: String, optional: true }, + label: { type: String, optional: true }, + className: { type: String, optional: true }, + slots: { type: Object, optional: true }, + }; + static defaultProps = { + className: "", + }; + static components = { BuilderComponent }; + + setup() { + if (!this.env.selectableContext) { + throw new Error("BuilderSelectItem must be used inside a BuilderSelect component."); + } + this.info = useActionInfo(); + const item = useRef("item"); + let label = ""; + const getLabel = () => { + // todo: it's not clear why the item.el?.innerHTML is not set at in + // some cases. We fallback on a previously set value to circumvent + // the problem, but it should be investigated. + label = this.props.label || item.el?.innerHTML || label || ""; + return label; + }; + + onMounted(getLabel); + + const { state, operation } = useSelectableItemComponent(this.props.id, { + getLabel, + }); + this.state = state; + this.operation = operation; + + this.onFocusin = this.operation.preview; + this.onFocusout = this.operation.revert; + } + + onClick() { + this.env.onSelectItem(); + this.operation.commit(); + this.removeKeydown?.(); + } + onKeydown(ev) { + const hotkey = getActiveHotkey(ev); + if (hotkey === "escape") { + this.operation.revert(); + this.removeKeydown?.(); + } + } + onMouseenter() { + this.operation.preview(); + const _onKeydown = this.onKeydown.bind(this); + document.addEventListener("keydown", _onKeydown); + this.removeKeydown = () => document.removeEventListener("keydown", _onKeydown); + } + onMouseleave() { + this.operation.revert(); + this.removeKeydown(); + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/builder_select_item.xml b/addons/html_builder/static/src/core/building_blocks/builder_select_item.xml new file mode 100644 index 0000000000000..ea957362d79e4 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_select_item.xml @@ -0,0 +1,31 @@ + + + + + +
+ +
+ + + + diff --git a/addons/html_builder/static/src/core/building_blocks/builder_text_input.js b/addons/html_builder/static/src/core/building_blocks/builder_text_input.js new file mode 100644 index 0000000000000..8e44edbdcbf6a --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_text_input.js @@ -0,0 +1,37 @@ +import { Component } from "@odoo/owl"; +import { pick } from "@web/core/utils/objects"; +import { BuilderTextInputBase, textInputBasePassthroughProps } from "./builder_text_input_base"; +import { + basicContainerBuilderComponentProps, + useInputBuilderComponent, + useBuilderComponent, +} from "../utils"; +import { BuilderComponent } from "./builder_component"; + +export class BuilderTextInput extends Component { + static template = "html_builder.BuilderTextInput"; + static props = { + ...basicContainerBuilderComponentProps, + ...textInputBasePassthroughProps, + default: { type: String, optional: true }, + }; + static components = { + BuilderComponent, + BuilderTextInputBase, + }; + + setup() { + useBuilderComponent(); + const { state, commit, preview } = useInputBuilderComponent({ + id: this.props.id, + defaultValue: this.props.default, + }); + this.commit = commit; + this.preview = preview; + this.state = state; + } + + get textInputBaseProps() { + return pick(this.props, ...Object.keys(textInputBasePassthroughProps)); + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/builder_text_input.xml b/addons/html_builder/static/src/core/building_blocks/builder_text_input.xml new file mode 100644 index 0000000000000..fd529529e4467 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_text_input.xml @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/addons/html_builder/static/src/core/building_blocks/builder_text_input_base.js b/addons/html_builder/static/src/core/building_blocks/builder_text_input_base.js new file mode 100644 index 0000000000000..cf23a298eaa4b --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_text_input_base.js @@ -0,0 +1,50 @@ +import { Component } from "@odoo/owl"; +import { useForwardRefToParent } from "@web/core/utils/hooks"; +import { useActionInfo } from "../utils"; + +// Props given to the builder input components that are then passed to the +// BuilderTextInputBase. +export const textInputBasePassthroughProps = { + action: { type: String, optional: true }, + placeholder: { type: String, optional: true }, + title: { type: String, optional: true }, + style: { type: String, optional: true }, + tooltip: { type: String, optional: true }, + inputClasses: { type: String, optional: true }, +}; + +export class BuilderTextInputBase extends Component { + static template = "html_builder.BuilderTextInputBase"; + static props = { + slots: { type: Object, optional: true }, + inputRef: { type: Function, optional: true }, + ...textInputBasePassthroughProps, + commit: { type: Function }, + preview: { type: Function }, + onFocus: { type: Function, optional: true }, + onKeydown: { type: Function, optional: true }, + value: { type: [String, { value: null }], optional: true }, + }; + + setup() { + this.info = useActionInfo(); + this.inputRef = useForwardRefToParent("inputRef"); + } + + onChange(ev) { + const normalizedDisplayValue = this.props.commit(ev.target.value); + ev.target.value = normalizedDisplayValue; + } + + onInput(ev) { + this.props.preview(ev.target.value); + } + + onFocus(ev) { + this.props.onFocus?.(ev); + } + + onKeydown(ev) { + this.props.onKeydown?.(ev); + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/builder_text_input_base.xml b/addons/html_builder/static/src/core/building_blocks/builder_text_input_base.xml new file mode 100644 index 0000000000000..d6ccb3fe0f555 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_text_input_base.xml @@ -0,0 +1,34 @@ + + + + +
+ + +
+ + + diff --git a/addons/html_builder/static/src/core/building_blocks/builder_urlpicker.js b/addons/html_builder/static/src/core/building_blocks/builder_urlpicker.js new file mode 100644 index 0000000000000..7eb1a8fd25f1f --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_urlpicker.js @@ -0,0 +1,72 @@ +import { BuilderComponent } from "@html_builder/core/building_blocks/builder_component"; +import { + BuilderTextInputBase, + textInputBasePassthroughProps, +} from "@html_builder/core/building_blocks/builder_text_input_base"; +import { + basicContainerBuilderComponentProps, + useBuilderComponent, + useInputBuilderComponent, +} from "@html_builder/core/utils"; +import { Component, useEffect } from "@odoo/owl"; +import { useChildRef } from "@web/core/utils/hooks"; +import { pick } from "@web/core/utils/objects"; +import wUtils from "@website/js/utils"; + +export class BuilderUrlPicker extends Component { + static template = "html_builder.BuilderUrlPicker"; + static props = { + ...basicContainerBuilderComponentProps, + ...textInputBasePassthroughProps, + default: { type: String, optional: true }, + }; + static components = { + BuilderComponent, + BuilderTextInputBase, + }; + + setup() { + this.inputRef = useChildRef(); + useBuilderComponent(); + const { state, commit, preview } = useInputBuilderComponent({ + id: this.props.id, + defaultValue: this.props.default, + }); + this.commit = commit; + this.preview = preview; + this.state = state; + + useEffect( + (inputEl) => { + if (!inputEl) { + return; + } + const unmountAutocompleteWithPages = wUtils.autocompleteWithPages( + inputEl, + { + classes: { + "ui-autocomplete": "o_website_ui_autocomplete", + }, + body: this.env.getEditingElement().ownerDocument.body, + urlChosen: () => { + this.commit(this.inputRef.el.value); + }, + }, + this.env + ); + return () => unmountAutocompleteWithPages(); + }, + () => [this.inputRef.el] + ); + } + + get textInputBaseProps() { + return pick(this.props, ...Object.keys(textInputBasePassthroughProps)); + } + + openPreviewUrl() { + if (this.inputRef.el.value) { + window.open(this.inputRef.el.value, "_blank"); + } + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/builder_urlpicker.xml b/addons/html_builder/static/src/core/building_blocks/builder_urlpicker.xml new file mode 100644 index 0000000000000..3aa7849d5b23e --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/builder_urlpicker.xml @@ -0,0 +1,20 @@ + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/core/building_blocks/model_many2many.js b/addons/html_builder/static/src/core/building_blocks/model_many2many.js new file mode 100644 index 0000000000000..496622c70eb9c --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/model_many2many.js @@ -0,0 +1,100 @@ +import { Component, useState, onWillStart, onWillUpdateProps } from "@odoo/owl"; +import { uniqueId } from "@web/core/utils/functions"; +import { useService } from "@web/core/utils/hooks"; +import { useDomState } from "@html_builder/core/utils"; +import { useCachedModel } from "@html_builder/core/cached_model_utils"; +import { BuilderComponent } from "./builder_component"; +import { BasicMany2Many } from "./basic_many2many"; + +export class ModelMany2Many extends Component { + static template = "html_builder.ModelMany2Many"; + static props = { + //...basicContainerBuilderComponentProps, + baseModel: String, + recordId: Number, + m2oField: String, + fields: { type: Array, element: String, optional: true }, + domain: { type: Array, optional: true }, + limit: { type: Number, optional: true }, + createAction: { type: String, optional: true }, + id: { type: String, optional: true }, + // currently always allowDelete + applyTo: { type: String, optional: true }, + }; + static defaultProps = { + fields: [], + domain: [], + limit: 10, + }; + static components = { BuilderComponent, BasicMany2Many }; + + setup() { + this.fields = useService("field"); + this.cachedModel = useCachedModel(); + this.state = useState({ + searchModel: undefined, + }); + this.modelEdit = undefined; + // This `useDomState` is here to get update from history when undo/redo + this.domState = useDomState((el) => { + if (!this.modelEdit) { + return { selection: [] }; + } + return { + selection: this.modelEdit.get(this.props.m2oField), + }; + }); + onWillStart(async () => { + await this.handleProps(this.props); + }); + onWillUpdateProps(async (newProps) => { + await this.handleProps(newProps); + }); + } + async handleProps(props) { + const [record] = await this.cachedModel.ormRead( + props.baseModel, + [props.recordId], + [props.m2oField] + ); + const selectedRecordIds = record[props.m2oField]; + // TODO: handle no record + const modelData = await this.fields.loadFields(props.baseModel, { + fieldNames: [props.m2oField], + }); + // TODO: simultaneously fly both RPCs + this.state.searchModel = modelData[props.m2oField].relation; + this.modelEdit = this.cachedModel.useModelEdit({ + model: this.props.baseModel, + recordId: props.recordId, + }); + if (!this.modelEdit.has(props.m2oField)) { + const storedSelection = await this.cachedModel.ormRead( + this.state.searchModel, + selectedRecordIds, + ["display_name"] + ); + for (const item of storedSelection) { + item.name = item.display_name; + } + this.modelEdit.init(props.m2oField, [...storedSelection]); + } + this.domState.selection = this.modelEdit.get(props.m2oField); + } + setSelection(newSelection) { + this.modelEdit.set(this.props.m2oField, newSelection); + this.env.editor.shared.history.addStep(); + } + create(name) { + // TODO maybe this can be in base layer + this.setSelection([ + ...this.domState.selection, + { + id: `new-${uniqueId()}`, + name: name, + display_name: name, + model: this.state.searchModel, + }, + ]); + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/model_many2many.xml b/addons/html_builder/static/src/core/building_blocks/model_many2many.xml new file mode 100644 index 0000000000000..72df41deefccc --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/model_many2many.xml @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/addons/html_builder/static/src/core/building_blocks/select_many2x.js b/addons/html_builder/static/src/core/building_blocks/select_many2x.js new file mode 100644 index 0000000000000..e6415e8b4a0f5 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/select_many2x.js @@ -0,0 +1,111 @@ +import { Component, useState, onWillUpdateProps } from "@odoo/owl"; +import { useService } from "@web/core/utils/hooks"; +import { useCachedModel } from "@html_builder/core/cached_model_utils"; +import { _t } from "@web/core/l10n/translation"; +import { SelectMenu } from "@web/core/select_menu/select_menu"; +import { useDropdownCloser } from "@web/core/dropdown/dropdown_hooks"; + +class SelectMany2XCreate extends Component { + static template = "html_builder.SelectMany2XCreate"; + static props = { + name: String, + create: Function, + }; + + setup() { + this.dropdown = useDropdownCloser(); + this.create = this.create.bind(this); + } + + create() { + this.dropdown.close(); + this.props.create(this.props.name); + } +} + +export class SelectMany2X extends Component { + static template = "html_builder.SelectMany2X"; + static props = { + model: String, + fields: { type: Array, element: String, optional: true }, + domain: { type: Array, optional: true }, + limit: { type: Number, optional: true }, + selected: { + type: Array, + element: { type: Object, shape: { id: [Number, String], "*": true } }, + }, + select: Function, + closeOnEnterKey: { type: Boolean, optional: true }, + message: { type: String, optional: true }, + create: { type: Function, optional: true }, + }; + static defaultProps = { + fields: [], + domain: [], + limit: 5, + closeOnEnterKey: true, + message: _t("Choose a record..."), + }; + static components = { SelectMenu, SelectMany2XCreate }; + + setup() { + this.orm = useService("orm"); + this.cachedModel = useCachedModel(); + this.state = useState({ + nameToCreate: "", + searchResults: [], + limit: this.props.limit, + }); + onWillUpdateProps(async (newProps) => { + if (this.searchInvalidationKey(this.props) !== this.searchInvalidationKey(newProps)) { + this.state.searchResults = []; + } + }); + } + searchInvalidationKey(props) { + return JSON.stringify([props.model, props.fields, props.domain]); + } + searchMore(searchValue) { + this.state.limit += this.props.limit; + this.search(searchValue); + } + async search(searchValue) { + const tuples = await this.orm.call(this.props.model, "name_search", [], { + name: searchValue, + domain: Object.values(this.props.domain).filter((item) => item !== null), + operator: "ilike", + limit: this.state.limit + 1, + }); + this.state.hasMore = tuples.length > this.state.limit; + this.state.searchResults = await this.cachedModel.ormRead( + this.props.model, + tuples.slice(0, this.state.limit).map(([id, _name]) => id), + [...new Set(this.props.fields).add("display_name").add("name")] + ); + } + filteredSearchResult() { + const selectedIds = new Set(this.props.selected.map((e) => e.id)); + return this.state.searchResults.filter((entry) => !selectedIds.has(entry.id)); + } + async canCreate(name) { + if (!this.props.create || !name.length) { + return false; + } + const allRecords = await this.cachedModel.ormSearchRead( + this.props.model, + [], + ["id", "name"] + ); + const usedNames = [ + // Exclude existing names + ...allRecords.map((item) => item.name), + // Exclude new names + ...this.props.selected.map((item) => item.name), + ]; + return !usedNames.includes(name); + } + async onInput(searchValue) { + this.search(searchValue); + this.state.nameToCreate = (await this.canCreate(searchValue)) ? searchValue : ""; + } +} diff --git a/addons/html_builder/static/src/core/building_blocks/select_many2x.xml b/addons/html_builder/static/src/core/building_blocks/select_many2x.xml new file mode 100644 index 0000000000000..5a253d18c2f06 --- /dev/null +++ b/addons/html_builder/static/src/core/building_blocks/select_many2x.xml @@ -0,0 +1,36 @@ + + + + + + + + + + + Search more... + + + + + + + + + Create "" + + + + diff --git a/addons/html_builder/static/src/core/cached_model_plugin.js b/addons/html_builder/static/src/core/cached_model_plugin.js new file mode 100644 index 0000000000000..a0cceaf82d25d --- /dev/null +++ b/addons/html_builder/static/src/core/cached_model_plugin.js @@ -0,0 +1,70 @@ +import { Plugin } from "@html_editor/plugin"; +import { Cache } from "@web/core/utils/cache"; +import { ModelEdit } from "./cached_model_utils"; + +export class CachedModelPlugin extends Plugin { + static id = "cachedModel"; + static shared = ["ormRead", "ormSearchRead", "useModelEdit"]; + static dependencies = ["history"]; + resources = { + before_save_handlers: this.savePendingRecords.bind(this), + }; + setup() { + this.ormReadCache = new Cache( + ({ model, ids, fields }) => this.services.orm.read(model, ids, fields), + JSON.stringify + ); + this.ormSearchReadCache = new Cache( + ({ model, domain, fields }) => this.services.orm.searchRead(model, domain, fields), + JSON.stringify + ); + this.modelEditCache = new Cache( + ({ model, recordId }) => new ModelEdit(this.dependencies.history, model, recordId), + JSON.stringify + ); + } + destroy() { + this.ormReadCache.invalidate(); + this.ormSearchReadCache.invalidate(); + this.modelEditCache.invalidate(); + } + ormRead(model, ids, fields) { + return this.ormReadCache.read({ model, ids, fields }); + } + ormSearchRead(model, domain, fields) { + return this.ormSearchReadCache.read({ model, domain, fields }); + } + useModelEdit({ model, recordId, field }) { + const modelEdit = this.modelEditCache.read({ model, recordId, field }); + // track el ? + return modelEdit; + } + async savePendingRecords(editableEl = this.editable) { + const inventory = {}; // model => { recordId => { field => value } } + for (const modelEdit of Object.values(this.modelEditCache.cache)) { + modelEdit.collect(inventory); + } + // Save inventoried changes. + for (const [model, records] of Object.entries(inventory)) { + for (const [recordId, record] of Object.entries(records)) { + for (const [field, value] of Object.entries(record)) { + // Currently only ids selection values are supported. + const proms = value + .filter((value) => typeof value.id === "string") + .map((value) => + this.services.orm.create(value.model, [{ name: value.name }]) + ); + const createdIDs = (await Promise.all(proms)).flat(); + const ids = value + .filter((value) => typeof value.id === "number") + .map((value) => value.id) + .concat(createdIDs); + await this.services.orm.write(model, [parseInt(recordId)], { + [field]: [[6, 0, ids]], + }); + } + } + } + return !!inventory.length; + } +} diff --git a/addons/html_builder/static/src/core/cached_model_utils.js b/addons/html_builder/static/src/core/cached_model_utils.js new file mode 100644 index 0000000000000..e027c4ae78b50 --- /dev/null +++ b/addons/html_builder/static/src/core/cached_model_utils.js @@ -0,0 +1,47 @@ +import { useEnv } from "@odoo/owl"; + +export function useCachedModel() { + return useEnv().editor.shared.cachedModel; +} + +export class ModelEdit { + constructor(history, model, recordId) { + this.values = {}; + this.history = history; + this.model = model; + this.recordId = recordId; + } + has(field) { + return field in this.values; + } + get(field) { + return JSON.parse(this.values[field].current); + } + init(field, value) { + value = JSON.stringify(value); + this.values[field] = { initial: value, current: value }; + } + set(field, value) { + const previous = this.values[field].current; + value = JSON.stringify(value); + this.history.applyCustomMutation({ + apply: () => { + this.values[field].current = value; + }, + revert: () => { + this.values[field].current = previous; + }, + }); + } + collect(inventory) { + const records = inventory[this.model] || {}; + const record = records[this.recordId] || {}; + for (const field of Object.keys(this.values)) { + if (this.values[field].initial !== this.values[field].current) { + inventory[this.model] = records; + records[this.recordId] = record; + record[field] = JSON.parse(this.values[field].current); + } + } + } +} diff --git a/addons/html_builder/static/src/core/clone_plugin.js b/addons/html_builder/static/src/core/clone_plugin.js new file mode 100644 index 0000000000000..f917270de323b --- /dev/null +++ b/addons/html_builder/static/src/core/clone_plugin.js @@ -0,0 +1,107 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { _t } from "@web/core/l10n/translation"; +import { isElementInViewport } from "@html_builder/utils/utils"; +import { isRemovable } from "./remove_plugin"; +import { isMovable } from "./move_plugin"; + +const clonableSelector = "a.btn:not(.oe_unremovable)"; + +export function isClonable(el) { + return el.matches(clonableSelector) || (isRemovable(el) && isMovable(el)); +} + +export class ClonePlugin extends Plugin { + static id = "clone"; + static dependencies = ["history", "builder-options"]; + static shared = ["cloneElement"]; + + resources = { + builder_actions: this.getActions(), + get_overlay_buttons: withSequence(2, { + getButtons: this.getActiveOverlayButtons.bind(this), + }), + // Resource definitions: + on_will_clone_handlers: [ + // ({ originalEl: el }) => { + // called on the original element before clone + // } + ], + on_cloned_handlers: [ + // ({ cloneEl: cloneEl, originalEl: el }) => { + // called after an element was cloned and inserted in the DOM + // } + ], + }; + + setup() { + this.overlayTarget = null; + this.ignoredClasses = new Set(this.getResource("system_classes")); + this.ignoredAttrs = new Set(this.getResource("system_attributes")); + } + + getActions() { + return { + // TODO maybe rename to cloneItem ? + addItem: { + apply: ({ + editingElement, + param: { mainParam: itemSelector }, + value: position, + }) => { + const itemEl = editingElement.querySelector(itemSelector); + this.cloneElement(itemEl, { position, scrollToClone: true }); + this.dependencies.history.addStep(); + }, + }, + }; + } + + getActiveOverlayButtons(target) { + if (!isClonable(target)) { + this.overlayTarget = null; + return []; + } + const buttons = []; + this.overlayTarget = target; + const disabledReason = this.dependencies["builder-options"].getCloneDisabledReason(target); + buttons.push({ + class: "o_snippet_clone fa fa-clone", + title: _t("Duplicate"), + disabledReason, + handler: () => { + this.cloneElement(this.overlayTarget, { scrollToClone: true }); + this.dependencies.history.addStep(); + }, + }); + return buttons; + } + + cloneElement(el, { position = "afterend", scrollToClone = false } = {}) { + this.dispatchTo("on_will_clone_handlers", { originalEl: el }); + // TODO cleanUI resource for each option + const cloneEl = el.cloneNode(true); + this.cleanElement(cloneEl); + el.insertAdjacentElement(position, cloneEl); + this.dependencies["builder-options"].updateContainers(cloneEl); + this.dispatchTo("on_cloned_handlers", { cloneEl: cloneEl, originalEl: el }); + if (scrollToClone && !isElementInViewport(cloneEl)) { + cloneEl.scrollIntoView({ behavior: "smooth", block: "center" }); + } + // TODO snippet_cloned ? + return cloneEl; + } + + cleanElement(toCleanEl) { + this.ignoredClasses.forEach((ignoredClass) => { + [toCleanEl, ...toCleanEl.querySelectorAll(`.${ignoredClass}`)].forEach((el) => + el.classList.remove(ignoredClass) + ); + }); + this.ignoredAttrs.forEach((ignoredAttr) => { + [toCleanEl, ...toCleanEl.querySelectorAll(`[${ignoredAttr}]`)].forEach((el) => + el.removeAttribute(ignoredAttr) + ); + }); + } +} diff --git a/addons/html_builder/static/src/core/color_style_plugin.js b/addons/html_builder/static/src/core/color_style_plugin.js new file mode 100644 index 0000000000000..d30921640a987 --- /dev/null +++ b/addons/html_builder/static/src/core/color_style_plugin.js @@ -0,0 +1,42 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { applyNeededCss } from "@html_builder/utils/utils_css"; +import { withSequence } from "@html_editor/utils/resource"; + +class ColorStylePlugin extends Plugin { + static id = "colorStyle"; + static dependencies = ["color"]; + resources = { + builder_style_actions: this.getStyleActions(), + apply_color_style: withSequence(5, (element, mode, color) => { + applyNeededCss(element, mode === "backgroundColor" ? "background-color" : mode, color); + return true; + }), + }; + + getStyleActions() { + return { + "background-color": { + getValue: (el) => this.dependencies.color.getElementColors(el)["backgroundColor"], + apply: (el, value) => { + const match = value.match(/var\(--([a-zA-Z0-9-_]+)\)/); + if (match) { + value = `bg-${match[1]}`; + } + this.dependencies.color.colorElement(el, value, "backgroundColor"); + }, + }, + color: { + getValue: (el) => this.dependencies.color.getElementColors(el)["color"], + apply: (el, value) => { + const match = value.match(/var\(--([a-zA-Z0-9-_]+)\)/); + if (match) { + value = `text-${match[1]}`; + } + this.dependencies.color.colorElement(el, value, "color"); + }, + }, + }; + } +} +registry.category("website-plugins").add(ColorStylePlugin.id, ColorStylePlugin); diff --git a/addons/html_builder/static/src/core/composite_action_plugin.js b/addons/html_builder/static/src/core/composite_action_plugin.js new file mode 100644 index 0000000000000..d5f327c515982 --- /dev/null +++ b/addons/html_builder/static/src/core/composite_action_plugin.js @@ -0,0 +1,192 @@ +import { convertParamToObject } from "@html_builder/core/utils"; +import { Plugin } from "@html_editor/plugin"; + +export class CompositeActionPlugin extends Plugin { + static id = "compositeAction"; + static dependencies = ["builderActions"]; + + compositeAction = { + prepare: async ({ actionParam: { mainParam: actions }, actionValue }) => { + const proms = []; + for (const actionDef of actions) { + const action = this.dependencies.builderActions.getAction(actionDef.action); + if (action.prepare) { + const actionDescr = { actionId: actionDef.action }; + if (actionDef.actionParam) { + actionDescr.actionParam = convertParamToObject(actionDef.actionParam); + } + if (actionDef.actionValue || actionValue) { + actionDescr.actionValue = actionDef.actionValue || actionValue; + } + proms.push(action.prepare(actionDescr)); + } + } + await Promise.all(proms); + }, + getPriority: ({ param: { mainParam: actions }, value }) => { + const results = []; + for (const actionDef of actions) { + const action = this.dependencies.builderActions.getAction(actionDef.action); + if (action.getPriority) { + const actionDescr = this.getActionDescription({ ...actionDef, value }); + results.push(action.getPriority(actionDescr)); + } + } + // TODO: should this be the max or a sum? + return Math.max(...results); + }, + // We arbitrarily keep the result of the 1st action, as we + // obviously cannot return more than one value. + getValue: ({ editingElement, param: { mainParam: actions } }) => { + let actionGetValue; + const actionDef = actions.find((actionDef) => { + const action = this.dependencies.builderActions.getAction(actionDef.action); + if (action.getValue) { + actionGetValue = action.getValue; + } + return !!action.getValue; + }); + if (actionDef) { + const actionDescr = this.getActionDescription({ + editingElement, + actionParam: actionDef.actionParam, + }); + return actionGetValue(actionDescr); + } + }, + isApplied: ({ editingElement, param: { mainParam: actions }, value }) => { + const results = []; + for (const actionDef of actions) { + const action = this.dependencies.builderActions.getAction(actionDef.action); + if (action.isApplied) { + const actionDescr = this.getActionDescription({ + editingElement, + ...actionDef, + value, + }); + results.push(action.isApplied(actionDescr)); + } + } + return results.every((result) => result); + }, + load: async ({ editingElement, param: { mainParam: actions }, value }) => { + const loadActions = []; + const loadResults = []; + for (const actionDef of actions) { + const action = this.dependencies.builderActions.getAction(actionDef.action); + if (action.load) { + const actionDescr = this.getActionDescription({ + editingElement, + ...actionDef, + value, + }); + loadActions.push(actionDef.action); + // We can't use Promise.all as unrelated loads could have + // overriding impacts (like updating/creating the same file) + // In such cases, this approach allows to define the order + // of actions and ensures predictable load results. + loadResults.push(await action.load(actionDescr)); + } + } + return loadActions.reduce((acc, actionId, idx) => { + acc[actionId] = loadResults[idx]; + return acc; + }, {}); + }, + apply: async ({ + editingElement, + param: { mainParam: actions }, + value, + loadResult, + dependencyManager, + selectableContext, + }) => { + for (const actionDef of actions) { + const action = this.dependencies.builderActions.getAction(actionDef.action); + if (action.apply) { + const actionDescr = this.getActionDescription({ + editingElement, + value, + ...actionDef, + loadResult, + dependencyManager, + selectableContext, + }); + await action.apply(actionDescr); + } + } + }, + loadOnClean: true, + clean: ({ + editingElement, + param: { mainParam: actions }, + value, + loadResult, + dependencyManager, + selectableContext, + nextAction, + }) => { + for (const actionDef of actions) { + const action = this.dependencies.builderActions.getAction(actionDef.action); + const actionDescr = this.getActionDescription({ + editingElement, + ...actionDef, + value, + loadResult, + dependencyManager, + selectableContext, + nextAction, + }); + + if (action.clean) { + action.clean(actionDescr); + } else if (action.apply) { + if (loadResult && loadResult[actionDef.action]) { + actionDescr.loadResult = loadResult[actionDef.action]; + } + action.apply(actionDescr); + } + } + }, + }; + + resources = { + builder_actions: { + composite: this.compositeAction, + reloadComposite: { + // Do not use with actions that need a custom reload. + // TODO: a class approach to actions would be able to solve that + // limitation and would also remove the need to split + // `composite` and `reloadComposite`. + reload: {}, + ...this.compositeAction, + }, + }, + }; + + getActionDescription(action) { + const { action: actionId, actionParam, actionValue, value, loadResult } = action; + const actionDescr = {}; + const forwardedSpecs = [ + "editingElement", + "dependencyManager", + "selectableContext", + "nextAction", + ]; + for (const spec of forwardedSpecs) { + if (action[spec]) { + actionDescr[spec] = action[spec]; + } + } + if (actionParam) { + actionDescr.param = convertParamToObject(actionParam); + } + if (actionValue || value) { + actionDescr.value = actionValue || value; + } + if (loadResult && loadResult[actionId]) { + actionDescr.loadResult = loadResult[actionId]; + } + return actionDescr; + } +} diff --git a/addons/html_builder/static/src/core/core_builder_action_plugin.js b/addons/html_builder/static/src/core/core_builder_action_plugin.js new file mode 100644 index 0000000000000..1155420af1212 --- /dev/null +++ b/addons/html_builder/static/src/core/core_builder_action_plugin.js @@ -0,0 +1,322 @@ +import { Plugin } from "@html_editor/plugin"; +import { CSS_SHORTHANDS, applyNeededCss, areCssValuesEqual } from "@html_builder/utils/utils_css"; +import { backgroundImageCssToParts, backgroundImagePartsToCss } from "@html_editor/utils/image"; + +export function withoutTransition(editingElement, callback) { + if (editingElement.classList.contains("o_we_force_no_transition")) { + return callback(); + } + editingElement.classList.add("o_we_force_no_transition"); + try { + return callback(); + } finally { + editingElement.classList.remove("o_we_force_no_transition"); + } +} + +export class CoreBuilderActionPlugin extends Plugin { + static id = "coreBuilderAction"; + static shared = ["setStyle", "getStyleAction"]; + resources = { + builder_actions: this.getActions(), + builder_style_actions: this.getStyleActions(), + system_classes: ["o_we_force_no_transition"], + }; + + setup() { + this.customStyleActions = {}; + for (const styleActions of this.getResource("builder_style_actions")) { + for (const [actionId, action] of Object.entries(styleActions)) { + if (actionId in this.customStyleActions) { + throw new Error(`Duplicate builder action id: ${action.id}`); + } + this.customStyleActions[actionId] = { id: actionId, ...action }; + } + } + Object.freeze(this.customStyleActions); + } + + getActions() { + return { + classAction, + styleAction: this.getStyleAction(), + attributeAction, + dataAttributeAction, + setClassRange, + }; + } + + getStyleActions() { + const styleActions = { + "background-image-url": { + getValue: (el) => { + const value = getStyleValue(el, "background-image"); + const match = value.match(/url\(([^)]+)\)/); + return match ? match[1] : ""; + }, + apply: (el, value, param) => { + const parts = backgroundImageCssToParts(el.style["background-image"]); + if (value) { + parts.url = `url('${value}')`; + } else { + delete parts.url; + } + // todo: deal with the gradients + setStyle(el, "background-image", backgroundImagePartsToCss(parts), param); + }, + }, + "box-shadow": { + getValue: (el, styleName) => { + const value = getStyleValue(el, styleName); + const inset = value.includes("inset"); + let values = value + .replace(/,\s/g, ",") + .replace("inset", "") + .trim() + .split(/\s+/g); + const color = values.find((s) => !s.match(/^\d/)); + values = values.join(" ").replace(color, "").trim(); + return `${color} ${values}${inset ? " inset" : ""}`; + }, + }, + "border-width": { + getValue: (el, styleName) => { + let value = getStyleValue(el, styleName); + if (value.endsWith("px")) { + value = value + .split(/\s+/g) + .map( + (singleValue) => + // Rounding value up avoids zoom-in issues. + // Zoom-out issues are not an expected use case. + `${Math.ceil(parseFloat(singleValue))}px` + ) + .join(" "); + } + return value; + }, + }, + "row-gap": { + getValue: (el, styleName) => parseInt(getStyleValue(el, styleName)) || 0, + }, + "column-gap": { + getValue: (el, styleName) => parseInt(getStyleValue(el, styleName)) || 0, + }, + width: { + // using inline style instead of computed because of the + // messy %-px convertion and the messy auto keyword). + getValue: (el) => el.style.width, + }, + }; + for (const borderWidthPropery of CSS_SHORTHANDS["border-width"]) { + styleActions[borderWidthPropery] = styleActions["border-width"]; + } + return styleActions; + } + + getStyleAction() { + const getValue = (el, styleName) => + // const { editingElement, param } = args[0]; + // Disable all transitions for the duration of the style check + // as we want to know the final value of a property to properly + // update the UI. + withoutTransition(el, () => { + const customStyle = this.customStyleActions[styleName]; + if (customStyle) { + return customStyle.getValue(el, styleName); + } else { + return getStyleValue(el, styleName); + } + }); + return { + getValue: ({ editingElement, param = {} }) => getValue(editingElement, param.mainParam), + isApplied: ({ editingElement, param = {}, value }) => { + const currentValue = getValue(editingElement, param.mainParam); + return currentValue === value; + }, + apply: ({ editingElement, param = {}, value }) => { + param = { ...param }; + const styleName = param.mainParam; + delete param.mainParam; + this.setStyle(editingElement, styleName, value, param); + }, + // TODO clean() is missing !! + }; + } + setStyle(element, styleName, styleValue, params) { + // Disable all transitions for the duration of the method as many + // comparisons will be done on the element to know if applying a + // property has an effect or not. Also, changing a css property via the + // editor should not show any transition as previews would not be done + // immediately, which is not good for the user experience. + withoutTransition(element, () => { + const customSetStyle = this.customStyleActions[styleName]?.apply; + customSetStyle + ? customSetStyle(element, styleValue, params) + : setStyle(element, styleName, styleValue, params); + }); + } +} + +function getStyleValue(el, styleName) { + const computedStyle = window.getComputedStyle(el); + const cssProps = CSS_SHORTHANDS[styleName] || [styleName]; + const cssValues = cssProps.map((cssProp) => computedStyle.getPropertyValue(cssProp).trim()); + if (cssValues.length === 4 && areCssValuesEqual(cssValues[3], cssValues[1], styleName)) { + cssValues.pop(); + } + if (cssValues.length === 3 && areCssValuesEqual(cssValues[2], cssValues[0], styleName)) { + cssValues.pop(); + } + if (cssValues.length === 2 && areCssValuesEqual(cssValues[1], cssValues[0], styleName)) { + cssValues.pop(); + } + return cssValues.join(" "); +} + +function setStyle(el, styleName, value, { extraClass, force = false, allowImportant = true } = {}) { + const computedStyle = window.getComputedStyle(el); + const cssProps = CSS_SHORTHANDS[styleName] || [styleName]; + // Always reset the inline style first to not put inline style on an + // element which already has this style through css stylesheets. + for (const cssProp of cssProps) { + el.style.setProperty(cssProp, ""); + } + el.classList.remove(extraClass); + + // Replacing ', ' by ',' to prevent attributes with internal space separators from being split: + // eg: "rgba(55, 12, 47, 1.9) 47px" should be split as ["rgba(55,12,47,1.9)", "47px"] + const values = value.replace(/,\s/g, ",").split(/\s+/g); + // Compute missing values: + // "a" => "a a a a" + // "a b" => "a b a b" + // "a b c" => "a b c b" + // "a b c d" => "a b c d d d d" + while (values.length < cssProps.length) { + const len = values.length; + const index = len == 3 ? 1 : len == 1 || len == 2 ? 0 : len - 1; + values.push(values[index]); + } + + let hasUserValue = false; + const applyAllCSS = (values) => { + for (let i = cssProps.length - 1; i > 0; i--) { + hasUserValue = + applyNeededCss(el, cssProps[i], values.pop(), computedStyle, { + force, + allowImportant, + }) || hasUserValue; + } + hasUserValue = + applyNeededCss(el, cssProps[0], values.join(" "), computedStyle, { + force, + allowImportant, + }) || hasUserValue; + }; + applyAllCSS([...values]); + + if (extraClass) { + el.classList.toggle(extraClass, hasUserValue); + if (hasUserValue) { + // Might have changed because of the class. + for (const cssProp of cssProps) { + el.style.removeProperty(cssProp); + } + applyAllCSS(values); + } + } +} + +export const classAction = { + getPriority: ({ param: { mainParam: classNames } = {} }) => + (classNames || "")?.trim().split(/\s+/).filter(Boolean).length || 0, + isApplied: ({ editingElement, param: { mainParam: classNames } = {} }) => { + if (classNames === undefined || classNames === "") { + return true; + } + return classNames + .split(" ") + .every((className) => editingElement.classList.contains(className)); + }, + apply: ({ editingElement, param: { mainParam: classNames } = {} }) => { + for (const className of (classNames || "").split(" ")) { + if (className !== "") { + editingElement.classList.add(className); + } + } + }, + clean: ({ editingElement, param: { mainParam: classNames } = {} }) => { + for (const className of (classNames || "").split(" ")) { + if (className !== "") { + editingElement.classList.remove(className); + } + } + }, +}; + +const attributeAction = { + getValue: ({ editingElement, param: { mainParam: attributeName } = {} }) => + editingElement.getAttribute(attributeName), + isApplied: ({ editingElement, param: { mainParam: attributeName } = {}, value }) => { + if (value) { + return ( + editingElement.hasAttribute(attributeName) && + editingElement.getAttribute(attributeName) === value + ); + } else { + return !editingElement.hasAttribute(attributeName); + } + }, + apply: ({ editingElement, param: { mainParam: attributeName } = {}, value }) => { + if (value) { + editingElement.setAttribute(attributeName, value); + } else { + editingElement.removeAttribute(attributeName); + } + }, + clean: ({ editingElement, param: { mainParam: attributeName } = {} }) => { + editingElement.removeAttribute(attributeName); + }, +}; + +const dataAttributeAction = { + getValue: ({ editingElement, param: { mainParam: attributeName } = {} }) => + editingElement.dataset[attributeName], + isApplied: ({ editingElement, param: { mainParam: attributeName } = {}, value }) => { + if (value) { + return editingElement.dataset[attributeName] === value; + } else { + return !(attributeName in editingElement.dataset); + } + }, + apply: ({ editingElement, param: { mainParam: attributeName } = {}, value }) => { + if (value) { + editingElement.dataset[attributeName] = value; + } else { + delete editingElement.dataset[attributeName]; + } + }, + clean: ({ editingElement, param: { mainParam: attributeName } = {} }) => { + delete editingElement.dataset[attributeName]; + }, +}; + +// TODO maybe find a better place for this +const setClassRange = { + getValue: ({ editingElement, param: { mainParam: classNames } }) => { + for (const index in classNames) { + const className = classNames[index]; + if (editingElement.classList.contains(className)) { + return index; + } + } + }, + apply: ({ editingElement, param: { mainParam: classNames }, value: index }) => { + for (const className of classNames) { + if (editingElement.classList.contains(className)) { + editingElement.classList.remove(className); + } + } + editingElement.classList.add(classNames[index]); + }, +}; diff --git a/addons/html_builder/static/src/core/core_plugins.js b/addons/html_builder/static/src/core/core_plugins.js new file mode 100644 index 0000000000000..77f9b03d0e258 --- /dev/null +++ b/addons/html_builder/static/src/core/core_plugins.js @@ -0,0 +1,55 @@ +import { AnchorPlugin } from "./anchor/anchor_plugin"; +import { BuilderActionsPlugin } from "./builder_actions_plugin"; +import { BuilderComponentPlugin } from "./builder_component_plugin"; +import { BuilderOptionsPlugin } from "./builder_options_plugin"; +import { BuilderOverlayPlugin } from "./builder_overlay/builder_overlay_plugin"; +import { CachedModelPlugin } from "./cached_model_plugin"; +import { ClonePlugin } from "./clone_plugin"; +import { CoreBuilderActionPlugin } from "./core_builder_action_plugin"; +import { CompositeActionPlugin } from "./composite_action_plugin"; +import { CustomizeTabPlugin } from "./customize_tab_plugin"; +import { DisableSnippetsPlugin } from "./disable_snippets_plugin"; +import { DragAndDropPlugin } from "./drag_and_drop_plugin"; +import { DropZonePlugin } from "./drop_zone_plugin"; +import { DropZoneSelectorPlugin } from "./dropzone_selector_plugin"; +import { GridLayoutPlugin } from "./grid_layout/grid_layout_plugin"; +import { MediaWebsitePlugin } from "./media_website_plugin"; +import { MovePlugin } from "./move_plugin"; +import { OperationPlugin } from "./operation_plugin"; +import { OverlayButtonsPlugin } from "./overlay_buttons/overlay_buttons_plugin"; +import { RemovePlugin } from "./remove_plugin"; +import { ReplacePlugin } from "./replace_plugin"; +import { SavePlugin } from "./save_plugin"; +import { SaveSnippetPlugin } from "./save_snippet_plugin"; +import { SetupEditorPlugin } from "./setup_editor_plugin"; +import { VersionControlPlugin } from "./version_control_plugin"; +import { VisibilityPlugin } from "./visibility_plugin"; + +export const CORE_PLUGINS = [ + BuilderOptionsPlugin, + BuilderActionsPlugin, + BuilderComponentPlugin, + OperationPlugin, + BuilderOverlayPlugin, + OverlayButtonsPlugin, + MovePlugin, + GridLayoutPlugin, + DragAndDropPlugin, + ReplacePlugin, + RemovePlugin, + ClonePlugin, + SaveSnippetPlugin, + AnchorPlugin, + DropZonePlugin, + DisableSnippetsPlugin, + MediaWebsitePlugin, + SetupEditorPlugin, + SavePlugin, + VisibilityPlugin, + DropZoneSelectorPlugin, + CachedModelPlugin, + CoreBuilderActionPlugin, + CompositeActionPlugin, + CustomizeTabPlugin, + VersionControlPlugin, +]; diff --git a/addons/html_builder/static/src/core/customize_tab_plugin.js b/addons/html_builder/static/src/core/customize_tab_plugin.js new file mode 100644 index 0000000000000..825572c1ffee2 --- /dev/null +++ b/addons/html_builder/static/src/core/customize_tab_plugin.js @@ -0,0 +1,35 @@ +import { Plugin } from "@html_editor/plugin"; +import { reactive } from "@odoo/owl"; +import { registry } from "@web/core/registry"; + +export class CustomizeTabPlugin extends Plugin { + static id = "customizeTab"; + static shared = ["getCustomizeComponent", "openCustomizeComponent", "closeCustomizeComponent"]; + + setup() { + this.customizeComponent = reactive({ + component: null, + props: {}, + editingEls: null, + }); + this.closeCustomizeComponent = this.closeCustomizeComponent.bind(this); + } + getCustomizeComponent() { + return this.customizeComponent; + } + openCustomizeComponent(component, editingEls, props = {}) { + this.customizeComponent.component = component; + this.customizeComponent.editingEls = editingEls; + this.customizeComponent.props = { + ...props, + onClose: this.closeCustomizeComponent, + }; + } + closeCustomizeComponent() { + this.customizeComponent.component = null; + this.customizeComponent.editingEls = null; + this.customizeComponent.props = {}; + } +} + +registry.category("website-plugins").add(CustomizeTabPlugin.id, CustomizeTabPlugin); diff --git a/addons/html_builder/static/src/core/dependency_manager.js b/addons/html_builder/static/src/core/dependency_manager.js new file mode 100644 index 0000000000000..36e98d063cc85 --- /dev/null +++ b/addons/html_builder/static/src/core/dependency_manager.js @@ -0,0 +1,48 @@ +import { EventBus } from "@odoo/owl"; +import { batched } from "@web/core/utils/timing"; + +export class DependencyManager extends EventBus { + constructor() { + super(); + this.dependencies = []; + this.dependenciesMap = {}; + this.count = 0; + this.dirty = false; + this.triggerDependencyUpdated = batched(() => { + this.trigger("dependency-updated"); + }); + } + update() { + this.dependenciesMap = {}; + for (const [id, value, ignored] of this.dependencies.slice().reverse()) { + if (ignored && id in this.dependenciesMap) { + continue; + } + this.dependenciesMap[id] = value; + } + this.dirty = false; + } + + add(id, value, ignored = false) { + // In case the dependency is added after a dependent try to get it + // an event is scheduled to notify the dependent about it. + if (!ignored || !(id in this.dependenciesMap)) { + this.triggerDependencyUpdated(); + } + this.dependencies.push([id, value, ignored]); + this.dirty = true; + } + + get(id) { + if (this.dirty) { + this.update(); + } + return this.dependenciesMap[id]; + } + + removeByValue(value) { + this.dependencies = this.dependencies.filter(([, v]) => v !== value); + this.dirty = true; + this.triggerDependencyUpdated(); + } +} diff --git a/addons/html_builder/static/src/core/disable_snippets_plugin.js b/addons/html_builder/static/src/core/disable_snippets_plugin.js new file mode 100644 index 0000000000000..da9b23611d11f --- /dev/null +++ b/addons/html_builder/static/src/core/disable_snippets_plugin.js @@ -0,0 +1,135 @@ +import { omit } from "@web/core/utils/objects"; +import { Plugin } from "@html_editor/plugin"; + +export class DisableSnippetsPlugin extends Plugin { + static id = "disableSnippets"; + static dependencies = ["setup_editor_plugin", "dropzone", "dropzone_selector"]; + static shared = ["disableUndroppableSnippets"]; + resources = { + after_remove_handlers: this.disableUndroppableSnippets.bind(this), + on_mobile_preview_clicked: this.disableUndroppableSnippets.bind(this), + }; + + setup() { + this.snippetModel = this.services["html_builder.snippets"]; + this._disableSnippets = this.disableUndroppableSnippets.bind(this); + + // TODO only for website ? + // TODO improve to add case when "+" menu appears (resize event ?) + const editableDropdownEls = this.editable.querySelectorAll(".dropdown-menu.o_editable"); + editableDropdownEls.forEach((dropdownEl) => { + const dropdownToggleEl = dropdownEl.parentNode.querySelector(".dropdown-toggle"); + this.addDomListener(dropdownToggleEl, "shown.bs.dropdown", this._disableSnippets); + this.addDomListener(dropdownToggleEl, "hidden.bs.dropdown", this._disableSnippets); + }); + + const offcanvasEls = this.editable.querySelectorAll(".offcanvas"); + offcanvasEls.forEach((offcanvasEl) => { + this.addDomListener(offcanvasEl, "shown.bs.offcanvas", this._disableSnippets); + this.addDomListener(offcanvasEl, "hidden.bs.offcanvas", this._disableSnippets); + }); + + this.disableUndroppableSnippets(); + } + + /** + * Makes the snippet that cannot be dropped anywhere appear disabled. + * TODO: trigger the computation in the situation that needs it. + */ + disableUndroppableSnippets() { + const editableAreaEls = this.dependencies["setup_editor_plugin"].getEditableAreas(); + const rootEl = this.dependencies.dropzone.getDropRootElement(); + const dropAreasBySelector = this.getDropAreas(editableAreaEls, rootEl); + + // A snippet can only be dropped next/inside elements that are editable + // and that do not explicitely block them. + const checkSanitize = (el, forbidSanitize) => { + if (forbidSanitize === "form") { + return !el.closest('[data-oe-sanitize]:not([data-oe-sanitize="allow_form"])'); + } else { + return forbidSanitize ? !el.closest("[data-oe-sanitize]") : true; + } + }; + const canDrop = (snippet) => { + const snippetEl = snippet.content; + return !!dropAreasBySelector.find( + ({ selector, exclude, dropAreaEls }) => + snippetEl.matches(selector) && + !snippetEl.matches(exclude) && + dropAreaEls.some((el) => checkSanitize(el, snippet.forbidSanitize)) + ); + }; + + // Disable the snippets that cannot be dropped. + const snippetGroups = this.snippetModel.snippetsByCategory["snippet_groups"]; + let areGroupsDisabled = false; + if (!canDrop(snippetGroups[0])) { + snippetGroups.forEach((snippetGroup) => (snippetGroup.isDisabled = true)); + areGroupsDisabled = true; + } + + const snippets = []; + const ignoredCategories = ["snippet_groups"]; + if (areGroupsDisabled) { + ignoredCategories.push(...["snippet_structure", "snippet_custom"]); + } + for (const category in omit(this.snippetModel.snippetsByCategory, ...ignoredCategories)) { + snippets.push(...this.snippetModel.snippetsByCategory[category]); + } + snippets.forEach((snippet) => { + snippet.isDisabled = !canDrop(snippet); + }); + + // Disable the groups containing only disabled snippets. + if (!areGroupsDisabled) { + snippetGroups.forEach((snippetGroup) => { + snippetGroup.isDisabled = !snippets.find( + (snippet) => snippet.groupName === snippetGroup.groupName && !snippet.isDisabled + ); + }); + } + } + + /** + * Stores the selector/exclude that will make dropzones appear inside the + * editable elements, as well as the droppable zones (to compute them only + * once). + * + * @param {Array} editableAreaEls + * @param {HTMLElement} rootEl + * @returns {Array} + */ + getDropAreas(editableAreaEls, rootEl) { + const dropAreasBySelector = []; + this.getResource("dropzone_selector").forEach((dropzoneSelector) => { + const { + selector, + exclude = false, + dropIn, + dropNear, + excludeNearParent, + } = dropzoneSelector; + + const dropAreaEls = []; + if (dropNear) { + dropAreaEls.push( + ...this.dependencies.dropzone.getSelectorSiblings(editableAreaEls, rootEl, { + selector: dropNear, + excludeNearParent, + }) + ); + } + if (dropIn) { + dropAreaEls.push( + ...this.dependencies.dropzone.getSelectorChildren(editableAreaEls, rootEl, { + selector: dropIn, + }) + ); + } + if (dropAreaEls.length) { + dropAreasBySelector.push({ selector, exclude, dropAreaEls }); + } + }); + return dropAreasBySelector; + } +} diff --git a/addons/html_builder/static/src/core/drag_and_drop_plugin.js b/addons/html_builder/static/src/core/drag_and_drop_plugin.js new file mode 100644 index 0000000000000..343904433a7a1 --- /dev/null +++ b/addons/html_builder/static/src/core/drag_and_drop_plugin.js @@ -0,0 +1,44 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { _t } from "@web/core/l10n/translation"; + +export class DragAndDropPlugin extends Plugin { + static id = "dragAndDrop"; + resources = { + has_overlay_options: { hasOption: (el) => this.isDraggable(el) }, + get_overlay_buttons: withSequence(1, { + getButtons: this.getActiveOverlayButtons.bind(this), + }), + }; + + setup() { + this.overlayTarget = null; + } + + isDraggable(el) { + const dropzoneSelectors = []; + this.getResource("dropzone_selector").forEach((selectors) => + dropzoneSelectors.push(selectors) + ); + const isDraggable = dropzoneSelectors + .flat() + .find(({ selector, exclude = false }) => el.matches(selector) && !el.matches(exclude)); + return !!isDraggable; + } + + getActiveOverlayButtons(target) { + if (!this.isDraggable(target)) { + this.overlayTarget = null; + return []; + } + + const buttons = []; + this.overlayTarget = target; + buttons.push({ + class: "o_move_handle fa fa-arrows", + title: _t("Drag and move"), + handler: () => {}, + }); + return buttons; + } +} diff --git a/addons/html_builder/static/src/core/drop_zone_plugin.inside.scss b/addons/html_builder/static/src/core/drop_zone_plugin.inside.scss new file mode 100644 index 0000000000000..917f695418745 --- /dev/null +++ b/addons/html_builder/static/src/core/drop_zone_plugin.inside.scss @@ -0,0 +1,62 @@ +.oe_drop_zone { + height: 10px; + background: $o-we-dropzone-bg-color; + animation: dropZoneInsert 1s linear 0s infinite alternate; + + &.oe_insert { + position: relative; + width: 100%; + border-radius: $border-radius-lg; + outline: $o-we-dropzone-border-width dashed $o-we-dropzone-accent-color; + outline-offset: -$o-we-dropzone-border-width; + z-index: 2000; // TODO use $o-we-overlay-zindex instead + } + + &.o_dropzone_highlighted { + filter: brightness(1.5); + transition: 200ms; + } +} + +.oe_drop_zone:not(.oe_grid_zone) { + &.oe_insert { + min-width: $o-we-dropzone-size; + height: $o-we-dropzone-size; + min-height: $o-we-dropzone-size; + margin: (-$o-we-dropzone-size/2) 0; + padding: 0; + + &.oe_vertical { + width: $o-we-dropzone-size; + float: left; + margin: 0 (-$o-we-dropzone-size/2); + } + } + + &.oe_sanitized_drop_zone { + position: absolute; + top: 0px; + height: 100%; + padding: 15px; + margin: 0px; + backdrop-filter: blur(15px); + background-color: rgba($o-we-bg-lighter, 0.15); + color: white; + outline-color: $o-we-bg-lighter; + z-index: 1999; // TODO + + > p { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: calc(100% - 30px); + text-shadow: 0px 0px 4px black; + font-size: 20px; + } + } +} + +// TODO for mass_mailing only ? +body.oe_dropzone_active .note-editable { + overflow: hidden; +} diff --git a/addons/html_builder/static/src/core/drop_zone_plugin.js b/addons/html_builder/static/src/core/drop_zone_plugin.js new file mode 100644 index 0000000000000..2eaf582160925 --- /dev/null +++ b/addons/html_builder/static/src/core/drop_zone_plugin.js @@ -0,0 +1,362 @@ +import { isElementVisible } from "@html_builder/utils/utils"; +import { Plugin } from "@html_editor/plugin"; +import { _t } from "@web/core/l10n/translation"; + +export class DropZonePlugin extends Plugin { + static id = "dropzone"; + static dependencies = ["history", "setup_editor_plugin"]; + static shared = [ + "activateDropzones", + "removeDropzones", + "getDropRootElement", + "getSelectorSiblings", + "getSelectorChildren", + "getSelectors", + ]; + + setup() { + this.dropzoneSelectors = this.getResource("dropzone_selector"); + } + + /** + * Returns the root element in which the elements can be dropped. + * (e.g. if a modal or a dropdown is open, the snippets must be dropped only + * in this element) + * + * @returns {HTMLElement|undefined} + */ + getDropRootElement() { + const openModalEl = this.editable.querySelector(".modal.show"); + if (isElementVisible(openModalEl)) { + return openModalEl; + } + const openDropdownEl = this.editable.querySelector( + ".o_editable.dropdown-menu.show, .dropdown-menu.show .o_editable.dropdown-menu" + ); + if (openDropdownEl) { + return openDropdownEl; + } + const openOffcanvasEl = this.editable.querySelector(".offcanvas.show"); + if (openOffcanvasEl) { + return openOffcanvasEl.querySelector(".offcanvas-body"); + } + } + + /** + * Gets the selectors that determine where the given snippet can be placed. + * + * @param {HTMLElement} snippetEl the element + * @param {Object} snippet the associated snippet object + * @returns {Object} [selectorChildren, selectorSiblings] + */ + getSelectors(snippetEl, snippet) { + let selectorChildren = []; + let selectorSiblings = []; + const selectorExcludeAncestor = []; + + const editableAreaEls = this.dependencies.setup_editor_plugin.getEditableAreas(); + const rootEl = this.getDropRootElement(); + this.dropzoneSelectors.forEach((dropzoneSelector) => { + const { + selector, + exclude = false, + dropIn, + dropNear, + excludeAncestor, + excludeNearParent, + } = dropzoneSelector; + if (snippetEl.matches(selector) && !snippetEl.matches(exclude)) { + if (dropNear) { + selectorSiblings.push( + ...this.getSelectorSiblings(editableAreaEls, rootEl, { + selector: dropNear, + excludeNearParent, + }) + ); + } + if (dropIn) { + selectorChildren.push( + ...this.getSelectorChildren(editableAreaEls, rootEl, { selector: dropIn }) + ); + } + if (excludeAncestor) { + selectorExcludeAncestor.push(excludeAncestor); + } + } + }); + + // Prevent dropping an element into another one. + // (E.g. ToC inside another ToC) + if (selectorExcludeAncestor.length) { + const excludeAncestor = selectorExcludeAncestor.join(","); + selectorSiblings = selectorSiblings.filter((el) => !el.closest(excludeAncestor)); + selectorChildren = selectorChildren.filter((el) => !el.closest(excludeAncestor)); + } + + // Prevent dropping sanitized elements in sanitized zones. + const forbidSanitize = snippet.forbidSanitize; + const selectorSanitized = new Set(); + const filterSanitized = (el) => { + if (el.closest('[data-oe-sanitize="no_block"]')) { + return false; + } + let sanitizedZoneEl; + if (forbidSanitize === "form") { + sanitizedZoneEl = el.closest( + '[data-oe-sanitize]:not([data-oe-sanitize="allow_form"]):not([data-oe-sanitize="no_block"])' + ); + } else if (forbidSanitize) { + sanitizedZoneEl = el.closest( + '[data-oe-sanitize]:not([data-oe-sanitize="no_block"])' + ); + } + if (sanitizedZoneEl) { + selectorSanitized.add(sanitizedZoneEl); + return false; + } + return true; + }; + selectorSiblings = selectorSiblings.filter((el) => filterSanitized(el)); + selectorChildren = selectorChildren.filter((el) => filterSanitized(el)); + + return { + selectorSiblings: new Set(selectorSiblings), + selectorChildren: new Set(selectorChildren), + selectorSanitized, + }; + } + + /** + * Checks the condition for a sibling/children to be valid. + * + * @param {HTMLElement} el A selectorSibling or selectorChildren element + * @param {HTMLElement} rootEl the root element in which we can drop + * @returns {Boolean} + */ + checkSelectors(el, rootEl) { + if (rootEl && !rootEl.contains(el)) { + return false; + } + // Drop only in visible elements. + const invisibleClasses = + ".o_snippet_invisible, .o_snippet_mobile_invisible, .o_snippet_desktop_invisible"; + if (el.closest(invisibleClasses) && el.closest("[data-invisible]")) { + return false; + } + // Drop only in open dropdown and offcanvas elements. + if ( + (el.closest(".dropdown-menu") && !el.closest(".dropdown-menu.show")) || + (el.closest(".offcanvas") && !el.closest(".offcanvas.show")) + ) { + return false; + } + return true; + } + + /** + * Returns all the elements matching the `dropNear` selector, that are + * contained in editable elements. They correspond to elements next to which + * an element can be dropped (= siblings). + * + * @param {Array} editableAreaEls the editable elements + * @param {HTMLElement} rootEl the root element in which we can drop + * @param {String} selector `dropNear` selector + * @param {String} excludeParent selector allowing to exclude the siblings + * with a parent matching it. + * @returns {Array} + */ + getSelectorSiblings(editableAreaEls, rootEl, { selector, excludeParent = false }) { + const filterFct = (el) => + this.checkSelectors(el, rootEl) && + // Do not drop blocks into an image field. + !el.parentNode.closest("[data-oe-type=image]") && + !el.matches(".o_not_editable *") && + !el.matches(".o_we_no_overlay") && + (excludeParent ? !el.parentNode.matches(excludeParent) : true); + + const dropAreaEls = []; + editableAreaEls.forEach((el) => { + const areaEls = [...el.querySelectorAll(selector)].filter(filterFct); + dropAreaEls.push(...areaEls); + }); + return dropAreaEls; + } + + /** + * Returns all the elements matching the `dropIn` selector, that are + * contained in editable elements. They correspond to the elements in which + * elements can be dropped as children. + * + * @param {Array} editableAreaEls the editable elements + * @param {HTMLElement} rootEl the root element in which we can drop + * @param {String} selector `dropIn` selector + * @returns {Array} + */ + getSelectorChildren(editableAreaEls, rootEl, { selector }) { + const filterFct = (el) => + this.checkSelectors(el, rootEl) && + // Do not drop blocks into an image field. + !el.closest("[data-oe-type=image]") && + !el.matches('.o_not_editable :not([contenteditable="true"]), .o_not_editable'); + + const dropAreaEls = []; + editableAreaEls.forEach((el) => { + const areaEls = el.matches(selector) ? [el] : []; + areaEls.push(...el.querySelectorAll(selector)); + dropAreaEls.push(...areaEls.filter(filterFct)); + }); + return dropAreaEls; + } + + /** + * Creates a dropzone element. + * This allows to add data on the dropzone depending on the hook + * environment. + * TODO + * @param {HTMLElement} hookEl the dropzone parent + * @param {boolean} [vertical=false] + * @param {Object} [style] + * @returns {HTMLElement} + */ + createDropzone(hookEl, isVertical, style) { + const dropzoneEl = this.document.createElement("div"); + dropzoneEl.classList.add("oe_drop_zone", "oe_insert"); + + // Set the messages to display in the dropzone. + const editorMessagesAttributes = [ + "data-editor-message-default", + "data-editor-message", + "data-editor-sub-message", + ]; + for (const messageAttribute of editorMessagesAttributes) { + const message = hookEl.getAttribute(messageAttribute); + if (message) { + dropzoneEl.setAttribute(messageAttribute, message); + } + } + + if (isVertical) { + dropzoneEl.classList.add("oe_vertical"); + } + if (style) { + Object.assign(dropzoneEl.style, style); + } + return dropzoneEl; + } + + /** + * Creates a dropzone covering the whole sanitized element in which we + * cannot drop. + * + * @returns {HTMLElement} + */ + createSanitizedDropzone() { + const dropzoneEl = this.document.createElement("div"); + dropzoneEl.classList.add( + "oe_drop_zone", + "oe_insert", + "oe_sanitized_drop_zone", + "text-center", + "text-uppercase" + ); + const messageEl = this.document.createElement("p"); + messageEl.textContent = _t("For technical reasons, this block cannot be dropped here"); + dropzoneEl.prepend(messageEl); + return dropzoneEl; + } + + /** + * Creates a dropzone taking the entire area of the given row in grid mode. + * It will allow to place the elements dragged over it inside the grid it + * belongs to. + * + * @param {Element} rowEl + * @returns {HTMLElement} + */ + createGridDropzone(rowEl) { + const columnCount = 12; + const rowCount = parseInt(rowEl.dataset.rowCount); + const dropzoneEl = this.document.createElement("div"); + dropzoneEl.classList.add("oe_drop_zone", "oe_insert", "oe_grid_zone"); + Object.assign(dropzoneEl.style, { + gridArea: 1 + "/" + 1 + "/" + (rowCount + 1) + "/" + (columnCount + 1), + minHeight: window.getComputedStyle(rowEl).height, + width: window.getComputedStyle(rowEl).width, + }); + return dropzoneEl; + } + + /** + * @typedef Selectors + * @property {Set} selectorSiblings elements which must have + * siblings drop zones + * @property {Set} selectorChildren elements which must have + * child drop zones between each existing child + * @property {Set} selectorSanitized sanitized elements in + * which an indicative drop zone preventing the drop must be inserted + * @property {Set|Array} selectorGrids elements + * which are in grid mode and for which a grid drop zone must be inserted + */ + /** + * @typedef Options + * @property {Boolean} toInsertInline true if the dragged element is inline + * @property {Boolean}fromIframe TODO + */ + /** + * Creates drop zones in the DOM (= locations where dragged elements may be + * dropped). + * + * @param {Selectors} selectors + * @param {Options} options + * @returns + */ + activateDropzones( + { selectorSiblings, selectorChildren, selectorSanitized, selectorGrids = [] }, + { toInsertInline, fromIframe } = {} + ) { + // TODO improve this portion + const targets = []; + for (const el of selectorChildren) { + targets.push(...el.children); + el.prepend(this.createDropzone(el)); + } + targets.push(...selectorSiblings); + + for (const target of targets) { + if (!target.nextElementSibling?.classList.contains("oe_drop_zone")) { + target.after(this.createDropzone(target.parentElement)); + } + + if (!target.previousElementSibling?.classList.contains("oe_drop_zone")) { + target.before(this.createDropzone(target.parentElement)); + } + } + + // Inserting a sanitized dropzone for each sanitized area. + for (const sanitizedZoneEl of selectorSanitized) { + sanitizedZoneEl.style.position = "relative"; + sanitizedZoneEl.prepend(this.createSanitizedDropzone()); + } + this.sanitizedZoneEls = selectorSanitized; + + // Inserting a grid dropzone for each row in grid mode. + for (const rowEl of selectorGrids) { + rowEl.append(this.createGridDropzone(rowEl)); + } + + return [...this.editable.querySelectorAll(".oe_drop_zone:not(.oe_sanitized_drop_zone)")]; + } + + /** + * Removes all the dropzones. + */ + removeDropzones() { + this.editable.querySelectorAll(".oe_drop_zone").forEach((dropzoneEl) => { + dropzoneEl.remove(); + }); + this.sanitizedZoneEls.forEach((sanitizedZoneEl) => + sanitizedZoneEl.style.removeProperty("position") + ); + this.sanitizedZoneEls = []; + } +} diff --git a/addons/html_builder/static/src/core/dropzone_selector_plugin.js b/addons/html_builder/static/src/core/dropzone_selector_plugin.js new file mode 100644 index 0000000000000..6ea7b38fddba6 --- /dev/null +++ b/addons/html_builder/static/src/core/dropzone_selector_plugin.js @@ -0,0 +1,69 @@ +import { Plugin } from "@html_editor/plugin"; + +const card_parent_handlers = + ".s_three_columns .row > div, .s_comparisons .row > div, .s_cards_grid .row > div, .s_cards_soft .row > div, .s_product_list .row > div, .s_newsletter_centered .row > div, .s_company_team_spotlight .row > div, .s_comparisons_horizontal .row > div, .s_company_team_grid .row > div, .s_company_team_card .row > div, .s_carousel_cards_item"; +const special_cards_selector = `.s_card.s_timeline_card, div:is(${card_parent_handlers}) > .s_card`; + +const so_snippet_addition_drop_in = + ":not(p).oe_structure:not(.oe_structure_solo), :not(.o_mega_menu):not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section:not(.s_snippet_group), > div:not(.o_hook_drop_zone)))"; + +// TODO need to split by addons + +export class DropZoneSelectorPlugin extends Plugin { + static id = "dropzone_selector"; + resources = { + dropzone_selector: [ + { + selector: ".accordion > .accordion-item", + dropIn: ".accordion:has(> .accordion-item)", + }, + { + plugin: this, + get selector() { + return this.plugin.getResource("so_snippet_addition_selector").join(", "); + }, + dropIn: so_snippet_addition_drop_in, + }, + { + plugin: this, + get selector() { + return [ + ...this.plugin.getResource("so_content_addition_selector"), + ".s_card", + ].join(", "); + }, + exclude: `${special_cards_selector}`, + dropIn: "nav", + get dropNear() { + return `p, h1, h2, h3, ul, ol, div:not(.o_grid_item_image) > img, div:not(.o_grid_item_image) > a, .btn, ${this.plugin + .getResource("so_content_addition_selector") + .join(", ")}, .s_card:not(${special_cards_selector})`; + }, + excludeNearParent: so_snippet_addition_drop_in, + }, + { + selector: ".s_website_form_field", + exclude: ".s_website_form_dnone", + dropNear: ".s_website_form_field", + //TODO DROP LOCK WITHIN drop-lock-within="form" + }, + { + selector: ".row > div", + exclude: ".s_col_no_resize.row > div, .s_col_no_resize", + dropNear: ".row:not(.s_col_no_resize) > div", + }, + { + selector: ".row > div", + exclude: ".s_col_no_resize.row > div, .s_col_no_resize", + dropNear: ".row.o_grid_mode > div", + }, + ], + so_snippet_addition_selector: ["section", ".parallax", ".s_hr"], + so_content_addition_selector: [ + "blockquote", + ".s_text_highlight", + ".s_donation", // TODO: move to plugin + ".o_snippet_drop_in_only", + ], + }; +} diff --git a/addons/html_builder/static/src/core/editor.inside.scss b/addons/html_builder/static/src/core/editor.inside.scss new file mode 100644 index 0000000000000..f533080b3572d --- /dev/null +++ b/addons/html_builder/static/src/core/editor.inside.scss @@ -0,0 +1,108 @@ +$-editor-messages-margin-x: 2%; + +%o-editor-messages { + background: $o-we-dropzone-bg-color; + text-align: center; + color: #fff; + outline: $o-we-dropzone-border-width dashed $o-we-dropzone-accent-color; + outline-offset: -$o-we-dropzone-border-width; + + &:before { + content: attr(data-editor-message); + display: block; + font-size: 20px; + } + + // Show the default editor message only for "empty" elements + &:not(:empty) { + &[data-editor-message-default]:before { + content: none; + } + } + + &:after { + content: attr(data-editor-sub-message); + display: block; + } +} + +// This style block is about the "editor message" which highlights the areas +// where the user can drag & drop snippets. +.o_editable { + &.oe_structure.oe_empty, &[data-oe-type=html], .oe_structure.oe_empty { + + // Base case (website.page (#wrap), t-field (product description), ...) + > .oe_drop_zone.oe_insert:not(.oe_vertical) { + @extend %o-editor-messages; + height: auto; + + // Empty editable element during drag & drop + &:only-child { + width: 100% - 2 * $-editor-messages-margin-x; + padding: 12px 0; + margin: 20px $-editor-messages-margin-x; + } + + &:not(:only-child) { + &::before { + font-size: 16px; + } + + &[data-editor-message-default]::before { + content: none; + } + } + } + + // Exception 1: empty wrap NOT during drag & drop + &#wrap:empty { + @extend %o-editor-messages; + padding: 112px 0px; + margin: 20px $-editor-messages-margin-x; + border-radius: $border-radius-lg; + } + + // Exception 2: empty wrap during drag & drop (override of base case) + &#wrap > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child { + padding: 112px 0px; + text-shadow: none; + } + + > p:empty:only-child { + color: #aaa; + } + } + + &[data-oe-type=html].oe_empty:empty { + @extend %o-editor-messages; + } +} + +.oe_structure_solo > .oe_drop_zone { + // TODO implement something more robust. This is currently for our only + // use case of oe_structure_solo: the footer. The dropzone in there need to + // be 1px lower that the end-of-page dropzone to distinguish them. The + // usability has to be reviewed anyway. + transform: translateY(10px); // For some reason "1px" is not enough... +} + +.o-we-hint { + position: relative; + + &:after { + content: attr(o-we-hint-text); + position: absolute; + top: 0; + left: 0; + display: block; + color: inherit; + opacity: 0.4; + pointer-events: none; + text-align: inherit; + width: 100%; + } +} + +.css_non_editable_mode_hidden { + display: block !important; +} diff --git a/addons/html_builder/static/src/core/grid_layout/grid_layout.inside.scss b/addons/html_builder/static/src/core/grid_layout/grid_layout.inside.scss new file mode 100644 index 0000000000000..1577232e8d3ee --- /dev/null +++ b/addons/html_builder/static/src/core/grid_layout/grid_layout.inside.scss @@ -0,0 +1,78 @@ +// GRID LAYOUT +// we-button.o_grid { +// min-width: fit-content; +// padding-left: 4.5px !important; +// padding-right: 4.5px !important; +// } + +// we-select.o_grid we-toggler { +// width: fit-content !important; +// } + +// Background grid. +.o_we_background_grid { + padding: 0 !important; + + .o_we_cell { + fill: $o-we-fg-lighter; + fill-opacity: .1; + stroke: $o-we-bg-darkest; + stroke-opacity: .2; + stroke-width: 1px; + filter: drop-shadow(-1px -1px 0px rgba(255, 255, 255, 0.3)); + } + + &.o_we_grid_preview { + // TODO style error + // @include media-breakpoint-down(lg) { + // // Hiding the preview in mobile view (-> no grid in mobile view). We + // // cannot use `display: none` because it would prevent the animation + // // to be played and so its listener would not remove the preview. + // height: 0; + // } + + pointer-events: none; + + .o_we_cell { + animation: gridPreview 2s 0.5s; + } + } +} + +// Grid preview. +@keyframes gridPreview { + to { + fill-opacity: 0; + stroke-opacity: 0; + } +} + +.o_we_drag_helper { + padding: 0; + border: $o-we-handle-border-width * 2 solid $o-we-accent; + border-radius: $o-we-item-border-radius; +} + +// Highlight of the grid items padding. +@keyframes highlightPadding { + from { + border: solid rgba($o-we-handles-accent-color, 0.2); + border-width: var(--grid-item-padding-y) var(--grid-item-padding-x); + } + + to { + border: solid rgba($o-we-handles-accent-color, 0); + border-width: var(--grid-item-padding-y) var(--grid-item-padding-x); + } +} + +.o_we_padding_highlight.o_grid_item { + position: relative; + + &::after { + content: ""; + @include o-position-absolute(0, 0, 0, 0); + animation: highlightPadding 2s; + pointer-events: none; + } +} diff --git a/addons/html_builder/static/src/core/grid_layout/grid_layout.xml b/addons/html_builder/static/src/core/grid_layout/grid_layout.xml new file mode 100644 index 0000000000000..eda136b934b9e --- /dev/null +++ b/addons/html_builder/static/src/core/grid_layout/grid_layout.xml @@ -0,0 +1,19 @@ + + + + + +
+ + + + + + + + + +
+ + + diff --git a/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js b/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js new file mode 100644 index 0000000000000..c29239fdafefc --- /dev/null +++ b/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js @@ -0,0 +1,118 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { _t } from "@web/core/l10n/translation"; +import { + getGridItemProperties, + getGridProperties, + resizeGrid, + setElementToMaxZindex, +} from "@html_builder/utils/grid_layout_utils"; +import { isMobileView } from "@html_builder/utils/utils"; + +const gridItemSelector = ".row.o_grid_mode > div.o_grid_item"; + +function isGridItem(el) { + return el.matches(gridItemSelector); +} + +export class GridLayoutPlugin extends Plugin { + static id = "gridLayout"; + static dependencies = ["history"]; + resources = { + get_overlay_buttons: withSequence(0, { + getButtons: this.getActiveOverlayButtons.bind(this), + }), + on_cloned_handlers: this.onCloned.bind(this), + on_snippet_preview_handlers: this.adjustGridItem.bind(this), + on_snippet_dropped_handlers: this.adjustGridItem.bind(this), + }; + + setup() { + this.overlayTarget = null; + } + + getActiveOverlayButtons(target) { + if (!isGridItem(target)) { + this.overlayTarget = null; + return []; + } + + const buttons = []; + this.overlayTarget = target; + if (!isMobileView(this.overlayTarget)) { + buttons.push( + { + class: "o_send_back", + title: _t("Send to back"), + handler: this.sendGridItemToBack.bind(this), + }, + { + class: "o_bring_front", + title: _t("Bring to front"), + handler: this.bringGridItemToFront.bind(this), + } + ); + } + return buttons; + } + + onCloned({ cloneEl }) { + if (isGridItem(cloneEl)) { + // If it is a grid item, shift the clone by one cell to the right + // and to the bottom, wrap to the first column if we reached the + // last one. + let { rowStart, rowEnd, columnStart, columnEnd } = getGridItemProperties(cloneEl); + const columnSpan = columnEnd - columnStart; + columnStart = columnEnd === 13 ? 1 : columnStart + 1; + columnEnd = columnStart + columnSpan; + const newGridArea = `${rowStart + 1} / ${columnStart} / ${rowEnd + 1} / ${columnEnd}`; + cloneEl.style.gridArea = newGridArea; + + // Update the z-index and the grid row count. + const rowEl = cloneEl.parentElement; + setElementToMaxZindex(cloneEl, rowEl); + resizeGrid(rowEl); + } + } + + adjustGridItem({ snippetEl }) { + const gridItemEl = snippetEl.closest(".o_grid_item"); + if (gridItemEl) { + // Update the grid item height when previewing and dropping a + // snippet in it. + const rowEl = gridItemEl.parentElement; + const { rowGap, rowSize } = getGridProperties(rowEl); + const { rowStart, rowEnd } = getGridItemProperties(gridItemEl); + const oldRowSpan = rowEnd - rowStart; + + // Compute the new height. + const height = gridItemEl.scrollHeight; + const rowSpan = Math.ceil((height + rowGap) / (rowSize + rowGap)); + gridItemEl.style.gridRowEnd = rowStart + rowSpan; + gridItemEl.classList.remove(`g-height-${oldRowSpan}`); + gridItemEl.classList.add(`g-height-${rowSpan}`); + resizeGrid(rowEl); + } + } + + sendGridItemToBack() { + const rowEl = this.overlayTarget.parentNode; + const columnEls = [...rowEl.children].filter((el) => el !== this.overlayTarget); + const minZindex = Math.min(...columnEls.map((el) => el.style.zIndex)); + + // While the minimum z-index is not 0, it is OK to decrease it and to + // set the column to it. Otherwise, the column is set to 0 and the + // other columns z-index are increased by one. + if (minZindex > 0) { + this.overlayTarget.style.zIndex = minZindex - 1; + } else { + columnEls.forEach((columnEl) => columnEl.style.zIndex++); + this.overlayTarget.style.zIndex = 0; + } + } + + bringGridItemToFront() { + const rowEl = this.overlayTarget.parentNode; + setElementToMaxZindex(this.overlayTarget, rowEl); + } +} diff --git a/addons/html_builder/static/src/core/img.js b/addons/html_builder/static/src/core/img.js new file mode 100644 index 0000000000000..1125b231d4259 --- /dev/null +++ b/addons/html_builder/static/src/core/img.js @@ -0,0 +1,24 @@ +import { Component, onWillStart, xml } from "@odoo/owl"; + +export class Img extends Component { + static props = { + src: String, + class: { type: String, optional: true }, + style: { type: String, optional: true }, + alt: { type: String, optional: true }, + attrs: { type: Object, optional: true }, + }; + static template = xml``; + setup() { + onWillStart(async () => this.loadImage()); + } + + loadImage() { + return new Promise((resolve, reject) => { + const img = new Image(); + img.onload = () => resolve({ status: "loaded" }); + img.onerror = () => resolve({ status: "error" }); + img.src = this.props.src; + }); + } +} diff --git a/addons/html_builder/static/src/core/media_website_plugin.js b/addons/html_builder/static/src/core/media_website_plugin.js new file mode 100644 index 0000000000000..015489aafc3cb --- /dev/null +++ b/addons/html_builder/static/src/core/media_website_plugin.js @@ -0,0 +1,52 @@ +import { Plugin } from "@html_editor/plugin"; +import { MEDIA_SELECTOR, isProtected } from "@html_editor/utils/dom_info"; +import { closestElement } from "@html_editor/utils/dom_traversal"; +import { shouldEditableMediaBeEditable } from "@html_builder/utils/utils_css"; + +export class MediaWebsitePlugin extends Plugin { + static id = "media_website"; + static dependencies = ["media", "selection"]; + + setup() { + const basicMediaSelector = `${MEDIA_SELECTOR}, img`; + // (see isImageSupportedForStyle). + const mediaSelector = basicMediaSelector + .split(",") + .map((s) => `${s}:not([data-oe-xpath])`) + .join(","); + this.addDomListener(this.editable, "dblclick", (ev) => { + const targetEl = ev.target; + if (!targetEl.matches(mediaSelector)) { + return; + } + let isEditable = + // TODO that first check is probably useless/wrong: checking if + // the media itself has editable content should not be relevant. + // In fact the content of all media should be marked as non + // editable anyway. + targetEl.isContentEditable || + // For a media to be editable, the base case is to be in a + // container whose content is editable. + (targetEl.parentElement && targetEl.parentElement.isContentEditable); + + if (!isEditable && targetEl.classList.contains("o_editable_media")) { + isEditable = shouldEditableMediaBeEditable(targetEl); + } + if ( + isEditable && + !isProtected(this.dependencies.selection.getEditableSelection().anchorNode) + ) { + this.onDblClickEditableMedia(targetEl); + } + }); + } + + onDblClickEditableMedia(mediaEl) { + const params = { node: mediaEl }; + const sel = this.dependencies.selection.getEditableSelection(); + + const editableEl = + closestElement(params.node || sel.startContainer, ".o_editable") || this.editable; + this.dependencies.media.openMediaDialog(params, editableEl); + } +} diff --git a/addons/html_builder/static/src/core/move_plugin.js b/addons/html_builder/static/src/core/move_plugin.js new file mode 100644 index 0000000000000..94eff5aa7302b --- /dev/null +++ b/addons/html_builder/static/src/core/move_plugin.js @@ -0,0 +1,224 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { _t } from "@web/core/l10n/translation"; +import { + addMobileOrders, + fillRemovedItemGap, + removeMobileOrders, +} from "@html_builder/utils/column_layout_utils"; +import { isMobileView } from "@html_builder/utils/utils"; + +const moveUpOrDown = { + selector: [ + "section", + ".s_accordion .accordion-item", + ".s_showcase .row .row:not(.s_col_no_resize) > div", + ".s_hr", + // In snippets files + ".s_pricelist_boxed_item", + ".s_pricelist_cafe_item", + ".s_product_catalog_dish", + ".s_timeline_list_row", + ".s_timeline_row", + "s_timeline_images_row", + ].join(", "), +}; + +const moveLeftOrRight = { + selector: [ + ".row:not(.s_col_no_resize) > div", + ".nav-item", // TODO specific plugin + ].join(", "), + exclude: ".s_showcase .row .row > div", +}; + +export function isMovable(el) { + const canMoveUpOrDown = el.matches(moveUpOrDown.selector); + const canMoveLeftOrRight = + el.matches(moveLeftOrRight.selector) && !el.matches(moveLeftOrRight.exclude); + return canMoveUpOrDown || canMoveLeftOrRight; +} + +function getMoveDirection(el) { + const canMoveVertically = el.matches(moveUpOrDown.selector); + return canMoveVertically ? "vertical" : "horizontal"; +} + +export function getVisibleSibling(target, direction) { + const siblingEls = [...target.parentNode.children]; + const visibleSiblingEls = siblingEls.filter( + (el) => window.getComputedStyle(el).display !== "none" + ); + const targetMobileOrder = target.style.order; + // On mobile, if the target has a mobile order (which is independent + // from desktop), consider these orders instead of the DOM order. + if (targetMobileOrder && isMobileView(target)) { + visibleSiblingEls.sort((a, b) => parseInt(a.style.order) - parseInt(b.style.order)); + } + const targetIndex = visibleSiblingEls.indexOf(target); + const siblingIndex = direction === "prev" ? targetIndex - 1 : targetIndex + 1; + if (siblingIndex === -1 || siblingIndex === visibleSiblingEls.length) { + return false; + } + return visibleSiblingEls[siblingIndex]; +} + +export class MovePlugin extends Plugin { + static id = "move"; + resources = { + has_overlay_options: { hasOption: (el) => isMovable(el) }, + get_overlay_buttons: withSequence(0, { + getButtons: this.getActiveOverlayButtons.bind(this), + }), + on_cloned_handlers: this.onCloned.bind(this), + on_remove_handlers: this.onRemove.bind(this), + }; + + setup() { + this.overlayTarget = null; + this.isMobileView = false; + this.isGridItem = false; + } + + getActiveOverlayButtons(target) { + if (!isMovable(target)) { + this.overlayTarget = null; + return []; + } + + const buttons = []; + this.overlayTarget = target; + this.refreshState(); + if (this.areArrowsDisplayed()) { + if (this.hasPreviousSibling()) { + const direction = + getMoveDirection(this.overlayTarget) === "vertical" ? "up" : "left"; + const button = { + class: `fa fa-fw fa-angle-${direction}`, + title: _t("Move %s", direction), + handler: this.onMoveClick.bind(this, "prev"), + }; + buttons.push(button); + } + if (this.hasNextSibling()) { + const direction = + getMoveDirection(this.overlayTarget) === "vertical" ? "down" : "right"; + const button = { + class: `fa fa-fw fa-angle-${direction}`, + title: _t("Move %s", direction), + handler: this.onMoveClick.bind(this, "next"), + }; + buttons.push(button); + } + } + return buttons; + } + + onCloned({ cloneEl, originalEl }) { + if (!isMovable(originalEl)) { + return; + } + // If there is a mobile order, the clone must have an order different + // than the existing ones. + const hasMobileOrder = !!originalEl.style.order; + if (hasMobileOrder) { + const siblingEls = [...originalEl.parentNode.children]; + const maxOrder = Math.max(...siblingEls.map((el) => el.style.order)); + cloneEl.style.order = maxOrder + 1; + } + } + + onRemove(toRemoveEl) { + if (!isMovable(toRemoveEl)) { + return; + } + // If there is a mobile order, the gap created by the removed element + // must be filled in. + const mobileOrder = toRemoveEl.style.order; + if (mobileOrder) { + fillRemovedItemGap(toRemoveEl.parentElement, parseInt(mobileOrder)); + } + } + + refreshState() { + this.isMobileView = isMobileView(this.overlayTarget); + this.isGridItem = this.overlayTarget.classList.contains("o_grid_item"); + } + + // TODO check where to call it (SnippetMove > start). + // refreshTarget() { + // // Needed for compatibility (with already dropped snippets). + // // If the target is a column, check if all the columns are either mobile + // // ordered or not. If they are not consistent, then we remove the mobile + // // order classes from all of them, to avoid issues. + // const parentEl = this.overlayTarget.parentElement; + // if (parentEl.classList.contains("row")) { + // const columnEls = [...parentEl.children]; + // const orderedColumnEls = columnEls.filter((el) => el.style.order); + // if (orderedColumnEls.length && orderedColumnEls.length !== columnEls.length) { + // removeMobileOrders(orderedColumnEls); + // } + // } + // } + + areArrowsDisplayed() { + const siblingsEl = [...this.overlayTarget.parentNode.children]; + const visibleSiblingEl = siblingsEl.find( + (el) => el !== this.overlayTarget && window.getComputedStyle(el).display !== "none" + ); + // The arrows are not displayed if: + // - the target is a grid item and not in mobile view + // - the target has no visible siblings + return !!visibleSiblingEl && !(this.isGridItem && !this.isMobileView); + } + + hasPreviousSibling() { + return !!getVisibleSibling(this.overlayTarget, "prev"); + } + + hasNextSibling() { + return !!getVisibleSibling(this.overlayTarget, "next"); + } + + /** + * Move the element in the given direction + * + * @param {String} direction "prev" or "next" + */ + onMoveClick(direction) { + // TODO nav-item ? (=> specific plugin) + // const isNavItem = this.overlayTarget.classList.contains("nav-item"); + let hasMobileOrder = !!this.overlayTarget.style.order; + const siblingEls = this.overlayTarget.parentNode.children; + + // If the target is a column, the ordering in mobile view is independent + // from the desktop view. If we are in mobile view, we first add the + // mobile order if there is none yet. In the case where we are not in + // mobile view, the mobile order is reset. + const parentEl = this.overlayTarget.parentNode; + if (this.isMobileView && parentEl.classList.contains("row") && !hasMobileOrder) { + addMobileOrders(siblingEls); + hasMobileOrder = true; + } else if (!this.isMobileView && hasMobileOrder) { + removeMobileOrders(siblingEls); + hasMobileOrder = false; + } + + const siblingEl = getVisibleSibling(this.overlayTarget, direction); + if (hasMobileOrder) { + // Swap the mobile orders. + const currentOrder = this.overlayTarget.style.order; + this.overlayTarget.style.order = siblingEl.style.order; + siblingEl.style.order = currentOrder; + } else { + // Swap the DOM elements. + siblingEl.insertAdjacentElement( + direction === "prev" ? "beforebegin" : "afterend", + this.overlayTarget + ); + } + + // TODO scroll (data-no-scroll) + // TODO update invisible dom + } +} diff --git a/addons/html_builder/static/src/core/operation.inside.scss b/addons/html_builder/static/src/core/operation.inside.scss new file mode 100644 index 0000000000000..b8423ef5f6cce --- /dev/null +++ b/addons/html_builder/static/src/core/operation.inside.scss @@ -0,0 +1,17 @@ +.o_loading_screen { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 2000; // TODO $o-we-zindex + + &:not(.o_we_ui_loading) > img { + display: none; + } + + &.o_we_ui_loading { + background-color: $o-we-sidebar-content-backdrop-bg; + color: $o-we-fg-lighter; + } +} diff --git a/addons/html_builder/static/src/core/operation.js b/addons/html_builder/static/src/core/operation.js new file mode 100644 index 0000000000000..52fd79a6e160c --- /dev/null +++ b/addons/html_builder/static/src/core/operation.js @@ -0,0 +1,135 @@ +import { Mutex } from "@web/core/utils/concurrency"; + +// TODO when making apply async: +// - check `isDestroyed` instead of `this.editableDocument.defaultView` + +/** + * @typedef OperationParams + * @property {Function} load an async function for which the mutex should wait + * before executing the main function + * @property {Boolean} cancellable tells if the operation is cancellable (if it + * is a preview for example) + * @property {Function} cancelPrevious the function to run when cancelling + * @property {Number} [cancelTime=50] TODO + * @property {Boolean} [withLoadingEffect=true] specifes if a spinner should + * appear on the editable during the operation + * @property {Number} [loadingEffectDelay=500] the delay after which the + * spinner should appear + */ + +export class Operation { + constructor(editableDocument = document) { + this.mutex = new Mutex(); + this.editableDocument = editableDocument; + } + + /** + * Allows to execute a function in the mutex. + * See `OperationParams.load` to make it async. + * + * @param {Function} fn the function + * @param {OperationParams} params + * @returns {Promise} + */ + next( + fn, + { + load = () => Promise.resolve(), + cancellable, + cancelPrevious, + cancelTime = 50, + withLoadingEffect = true, + loadingEffectDelay = 500, + } = {} + ) { + this.cancelPrevious?.(); + let isCancel = false; + let cancelResolve; + this.cancelPrevious = + cancellable && + (() => { + this.cancelPrevious = null; + isCancel = true; + cancelPrevious?.(); + cancelResolve?.(); + }); + + const cancelTimePromise = new Promise((resolve) => setTimeout(resolve, cancelTime)); + const cancelLoadPromise = new Promise((resolve) => { + cancelResolve = resolve; + }); + + return this.mutex.exec(async () => { + if (isCancel) { + return; + } + + const removeLoadingElement = this.addLoadingElement( + withLoadingEffect, + loadingEffectDelay + ); + const applyOperation = async () => { + const loadResult = await load(); + + if (isCancel) { + return; + } + this.previousLoadResolve = null; + + // Cancel the operation if the iframe has been reloaded + // and does not have a browsing context anymore. + if (!this.editableDocument.defaultView) { + return; + } + + await fn?.(loadResult); + }; + + try { + await Promise.race([ + Promise.all([cancelLoadPromise, cancelTimePromise]), + applyOperation(), + ]); + } finally { + removeLoadingElement(); + } + }); + } + + /** + * Adds a transparent loading screen above the editable to prevent modifying + * its content during an ongoing operation. Returns a callback to remove + * the loading screen. + * + * @param {Boolean} withLoadingEffect if true, adds a loading effect + * @param {Number} loadingEffectDelay delay after which the loading effect + * should appear + * @returns {Function} + */ + addLoadingElement(withLoadingEffect, loadingEffectDelay) { + const loadingScreenEl = document.createElement("div"); + loadingScreenEl.classList.add( + ...["o_loading_screen", "d-flex", "justify-content-center", "align-items-center"] + ); + const spinnerEl = document.createElement("img"); + spinnerEl.setAttribute("src", "/web/static/img/spin.svg"); + loadingScreenEl.appendChild(spinnerEl); + this.editableDocument.body.appendChild(loadingScreenEl); + + // If specified, add a loading effect on that element after a delay. + let loadingTimeout; + if (withLoadingEffect) { + loadingTimeout = setTimeout( + () => loadingScreenEl.classList.add("o_we_ui_loading"), + loadingEffectDelay + ); + } + + return () => { + if (loadingTimeout) { + clearTimeout(loadingTimeout); + } + loadingScreenEl.remove(); + }; + } +} diff --git a/addons/html_builder/static/src/core/operation_plugin.js b/addons/html_builder/static/src/core/operation_plugin.js new file mode 100644 index 0000000000000..c6da8bb8e0997 --- /dev/null +++ b/addons/html_builder/static/src/core/operation_plugin.js @@ -0,0 +1,36 @@ +import { Plugin } from "@html_editor/plugin"; +import { Operation } from "./operation"; +import { useComponent } from "@odoo/owl"; + +/** @typedef {import("./operation").OperationParams} OperationParams */ + +export class OperationPlugin extends Plugin { + static id = "operation"; + static dependencies = ["history"]; + static shared = ["next"]; + + setup() { + this.operation = new Operation(this.document); + } + + /** + * Executes a function (async or not) in the mutex. + * + * @param {Function} fn the function + * @param {OperationParams} params + * @returns {Promise} + */ + next(fn, params) { + return this.operation.next(fn, params); + } +} + +export function useOperation() { + const comp = useComponent(); + return (apply, ...args) => { + comp.env.editor.shared.operation.next(async (...args) => { + await apply(...args); + comp.env.editor.shared.history.addStep(); + }, ...args); + }; +} diff --git a/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.js b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.js new file mode 100644 index 0000000000000..75f195f1d0103 --- /dev/null +++ b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.js @@ -0,0 +1,12 @@ +import { Component } from "@odoo/owl"; + +export class OverlayButtons extends Component { + static template = "html_builder.OverlayButtons"; + static props = { + state: { type: Object }, + }; + + setup() { + this.state = this.props.state; + } +} diff --git a/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.scss b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.scss new file mode 100644 index 0000000000000..374a7f26a3b01 --- /dev/null +++ b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.scss @@ -0,0 +1,30 @@ +.o_overlay_options { + + button { + // @extend %we-generic-button; + margin: 0 1px 0; + min-width: 22px; + padding: 0 $o-we-sidebar-content-field-button-group-button-spacing * .5; + color: $o-we-fg-lighter; + + // TODO hardcoded + height: 22px; + font-size: 16px; + } + + button.o_send_back { + width: 30px; + height: 22px; + background-image: url('/html_builder/static/img/options/bring-backward.svg'); + background-position: center; + background-repeat: no-repeat; + } + + button.o_bring_front { + width: 30px; + height: 22px; + background-image: url('/html_builder/static/img/options/bring-forward.svg'); + background-position: center; + background-repeat: no-repeat; + } +} diff --git a/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.xml b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.xml new file mode 100644 index 0000000000000..9ecafae05e749 --- /dev/null +++ b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.xml @@ -0,0 +1,17 @@ + + + +
+ + + +
+ + + diff --git a/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons_plugin.js b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons_plugin.js new file mode 100644 index 0000000000000..278535e054638 --- /dev/null +++ b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons_plugin.js @@ -0,0 +1,164 @@ +import { Plugin } from "@html_editor/plugin"; +import { reactive } from "@odoo/owl"; +import { throttleForAnimation } from "@web/core/utils/timing"; +import { getScrollingElement, getScrollingTarget } from "@web/core/utils/scrolling"; +import { checkElement } from "../builder_options_plugin"; +import { OverlayButtons } from "./overlay_buttons"; + +export class OverlayButtonsPlugin extends Plugin { + static id = "overlayButtons"; + static dependencies = ["selection", "overlay", "history", "operation"]; + static shared = [ + "hideOverlayButtons", + "showOverlayButtons", + "hideOverlayButtonsUi", + "showOverlayButtonsUi", + ]; + resources = { + step_added_handlers: this.refreshButtons.bind(this), + change_current_options_containers_listeners: this.addOverlayButtons.bind(this), + on_mobile_preview_clicked: this.refreshButtons.bind(this), + }; + + setup() { + // TODO find how to not overflow the mobile preview. + this.iframe = this.editable.ownerDocument.defaultView.frameElement; + this.overlay = this.dependencies.overlay.createOverlay(OverlayButtons, { + positionOptions: { + position: "top-middle", + onPositioned: (overlayEl, position) => { + const iframeRect = this.iframe.getBoundingClientRect(); + if (this.target && position.top < iframeRect.top) { + const targetRect = this.target.getBoundingClientRect(); + const newTop = iframeRect.top + targetRect.bottom + 15; + position.top = newTop; + overlayEl.style.top = `${newTop}px`; + } + return; + }, + margin: 15, + flip: false, + }, + closeOnPointerdown: false, + }); + this.target = null; + this.state = reactive({ + isVisible: true, + showUi: true, + buttons: [], + }); + + this.resizeObserver = new ResizeObserver(() => { + this.overlay.updatePosition(); + }); + + // TODO duplicate of builderOverlay => extract somewhere + // Recompute the buttons when the window is resized. + this.refresh = throttleForAnimation(this.refreshButtons.bind(this)); + this.addDomListener(window, "resize", this.refresh); + + // On keydown, hide the buttons and then show them again when the mouse + // moves. + const onMouseMoveOrDown = throttleForAnimation((ev) => { + this.showOverlayButtons(); + ev.currentTarget.removeEventListener("mousemove", onMouseMoveOrDown); + ev.currentTarget.removeEventListener("mousedown", onMouseMoveOrDown); + }); + this.addDomListener(this.editable, "keydown", (ev) => { + this.hideOverlayButtons(); + ev.currentTarget.addEventListener("mousemove", onMouseMoveOrDown); + ev.currentTarget.addEventListener("mousedown", onMouseMoveOrDown); + }); + + // Hide the buttons when scrolling. Show them again when the scroll is + // over. + const scrollingElement = getScrollingElement(this.document); + const scrollingTarget = getScrollingTarget(scrollingElement); + this.addDomListener( + scrollingTarget, + "scroll", + throttleForAnimation(() => { + this.hideOverlayButtons(); + clearTimeout(this.scrollingTimeout); + this.scrollingTimeout = setTimeout(() => { + this.showOverlayButtons(); + }, 250); + }), + { capture: true } + ); + + this._cleanups.push(() => { + this.removeOverlayButtons(); + this.resizeObserver.disconnect(); + }); + } + + refreshButtons() { + if (!this.target) { + return; + } + const buttons = []; + for (const { getButtons, editableOnly } of this.getResource("get_overlay_buttons")) { + if (checkElement(this.target, { editableOnly })) { + buttons.push(...getButtons(this.target)); + } + } + for (const button of buttons) { + const handler = button.handler; + button.handler = (...args) => { + this.dependencies.operation.next(async () => { + await handler(...args); + this.dependencies.history.addStep(); + }); + }; + } + this.state.buttons = buttons; + this.overlay.updatePosition(); + } + + hideOverlayButtons() { + this.state.isVisible = false; + } + + hideOverlayButtonsUi() { + this.state.showUi = false; + } + + showOverlayButtons() { + this.state.isVisible = true; + } + + showOverlayButtonsUi() { + this.state.showUi = true; + } + + addOverlayButtons(optionsContainer) { + this.removeOverlayButtons(); + + // Find the innermost option needing the overlay buttons. + const optionWithOverlayButtons = optionsContainer.findLast( + (option) => option.hasOverlayOptions + ); + if (optionWithOverlayButtons) { + this.target = optionWithOverlayButtons.element; + this.state.isVisible = true; + this.refreshButtons(); + this.overlay.open({ + target: optionWithOverlayButtons.element, + closeOnPointerdown: false, + props: { + state: this.state, + }, + }); + this.resizeObserver.observe(this.target, { box: "border-box" }); + } + } + + removeOverlayButtons() { + if (this.target) { + this.resizeObserver.unobserve(this.target); + this.target = null; + } + this.overlay.close(); + } +} diff --git a/addons/html_builder/static/src/core/remove_plugin.js b/addons/html_builder/static/src/core/remove_plugin.js new file mode 100644 index 0000000000000..c26104d05d959 --- /dev/null +++ b/addons/html_builder/static/src/core/remove_plugin.js @@ -0,0 +1,201 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { _t } from "@web/core/l10n/translation"; +import { resizeGrid } from "@html_builder/utils/grid_layout_utils"; +import { getVisibleSibling } from "./move_plugin"; +import { unremovableNodePredicates as deletePluginPredicates } from "@html_editor/core/delete_plugin"; +import { isUnremovableQWebElement as qwebPluginPredicate } from "@html_editor/others/qweb_plugin"; + +// TODO (see forceNoDeleteButton) make a resource in the options plugins to not +// duplicate some selectors. +const unremovableSelectors = [ + ".s_carousel .carousel-item", + ".s_quotes_carousel .carousel-item", + ".s_carousel_intro .carousel-item", + ".o_mega_menu", + ".o_mega_menu > section", + ".s_dynamic_snippet_title", + ".s_table_of_content_navbar_wrap", + ".s_table_of_content_main", + ".nav-item", + "header", + "main", + "footer", +].join(", "); + +const unremovableNodePredicates = [ + ...deletePluginPredicates, + qwebPluginPredicate, + (node) => node.parentNode.matches('[data-oe-type="image"]'), + (node) => node.matches(unremovableSelectors), +]; + +export function isRemovable(el) { + return !unremovableNodePredicates.some((p) => p(el)); +} + +const layoutElementsSelector = [".o_we_shape", ".o_we_bg_filter"].join(","); + +export class RemovePlugin extends Plugin { + static id = "remove"; + static dependencies = ["history", "builder-options"]; + resources = { + get_overlay_buttons: withSequence(4, { + getButtons: this.getActiveOverlayButtons.bind(this), + }), + }; + static shared = ["removeElement", "removeElementAndUpdateContainers"]; + + setup() { + this.overlayTarget = null; + } + + getActiveOverlayButtons(target) { + if (!isRemovable(target)) { + this.overlayTarget = null; + return []; + } + + const buttons = []; + this.overlayTarget = target; + const disabledReason = this.dependencies["builder-options"].getRemoveDisabledReason(target); + buttons.push({ + class: "oe_snippet_remove bg-danger fa fa-trash", + title: _t("Remove"), + disabledReason, + handler: () => { + this.removeElementAndUpdateContainers(this.overlayTarget); + }, + }); + return buttons; + } + + isEmptyAndRemovable(el) { + const childrenEls = [...el.children]; + // Consider a
element as empty if it only contains a + //
element (e.g. when its image has just been + // removed). + const isEmptyFigureEl = + el.matches("figure") && + childrenEls.length === 1 && + childrenEls[0].matches("figcaption"); + + const isEmpty = + isEmptyFigureEl || + (el.textContent.trim() === "" && + childrenEls.every((el) => + // Consider layout-only elements (like bg-shapes) as empty + el.matches(layoutElementsSelector) + )); + + const optionsTargetEls = this.dependencies["builder-options"] + .computeContainers(el) + .map((e) => e.element); + + return ( + isEmpty && + !el.classList.contains("oe_structure") && + !el.parentElement.classList.contains("carousel-item") && + // TODO check if ok (parent editable) + (!optionsTargetEls.includes(el) || + optionsTargetEls.some((targetEl) => targetEl.contains(el))) && + isRemovable(el) + ); + } + + removeElementAndUpdateContainers(el) { + const elementToSelect = this.removeElement(el); + this.dependencies.history.addStep(); + this.dependencies["builder-options"].updateContainers(elementToSelect); + } + + removeElement(el) { + const elementToSelect = this.removeCurrentTarget(el); + this.dispatchTo("after_remove_handlers", el); + return elementToSelect; + } + + removeCurrentTarget(toRemoveEl) { + // Get the elements having options containers. + let optionsTargetEls = this.getOptionsContainersElements(); + + // TODO invisible element + // TODO will_remove_snippet + this.dispatchTo("on_remove_handlers", toRemoveEl); + + let parentEl = toRemoveEl.parentElement; + const previousSiblingEl = getVisibleSibling(toRemoveEl, "prev"); + const nextSiblingEl = getVisibleSibling(toRemoveEl, "next"); + if (parentEl.matches(".o_editable:not(body)")) { + parentEl = parentEl.closest("body"); + } + + // Remove tooltips. + [toRemoveEl, ...toRemoveEl.querySelectorAll("*")].forEach((el) => { + const tooltip = Tooltip.getInstance(el); + if (tooltip) { + tooltip.dispose(); + } + }); + // Remove the element. + toRemoveEl.remove(); + + // Resize the grid, if any, to have the correct row count. + // Must be done here and not in a dedicated onRemove method because + // onRemove is called before actually removing the element and it + // should be the case in order to resize the grid. + if (toRemoveEl.classList.contains("o_grid_item")) { + resizeGrid(parentEl); + } + + if (parentEl) { + const firstChildEl = parentEl.firstChild; + if (firstChildEl && !firstChildEl.tagName && firstChildEl.textContent === " ") { + parentEl.removeChild(firstChildEl); + } + } + + let nextElementToSelect; + if (previousSiblingEl || nextSiblingEl) { + // Activate the previous or next visible siblings if any. + nextElementToSelect = previousSiblingEl || nextSiblingEl; + } else { + // Remove potential ancestors (like when removing the last column of + // a snippet). + while (!optionsTargetEls.includes(parentEl)) { + const nextParentEl = parentEl.parentElement; + if (!nextParentEl) { + break; + } + if (this.isEmptyAndRemovable(parentEl, optionsTargetEls)) { + parentEl.remove(); + } + parentEl = nextParentEl; + } + nextElementToSelect = parentEl; + + optionsTargetEls = this.getOptionsContainersElements(); + if (this.isEmptyAndRemovable(parentEl, optionsTargetEls)) { + nextElementToSelect = this.removeCurrentTarget(parentEl); + } + } + + // TODO is it still necessary ? + this.editable + .querySelectorAll(".note-control-selection") + .forEach((el) => (el.style.display = "none")); + this.editable.querySelectorAll(".o_table_handler").forEach((el) => el.remove()); + + return nextElementToSelect; + // TODO: + // - trigger snippet_removed + // - display message in the editor if no snippets, + // - update invisible (already OK (see onChange)) + // - update undroppable snippets + // - cover update for translation mode + } + + getOptionsContainersElements() { + return this.dependencies["builder-options"].getContainers().map((option) => option.element); + } +} diff --git a/addons/html_builder/static/src/core/replace_plugin.js b/addons/html_builder/static/src/core/replace_plugin.js new file mode 100644 index 0000000000000..0dfac91a682f9 --- /dev/null +++ b/addons/html_builder/static/src/core/replace_plugin.js @@ -0,0 +1,57 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { _t } from "@web/core/l10n/translation"; + +// Snippets are replaceable only if they are not within another snippet (e.g. a +// "s_countdown" is not replaceable when it is dropped as inner content). +function isReplaceable(el) { + // TODO has snippet group ? + return ( + el.matches("[data-snippet]:not([data-snippet] *), .oe_structure > *") && + !el.matches(".oe_structure_solo *") + ); +} + +export class ReplacePlugin extends Plugin { + static id = "replace"; + static dependencies = ["history", "builder-options"]; + resources = { + get_overlay_buttons: withSequence(3, { + getButtons: this.getActiveOverlayButtons.bind(this), + }), + }; + + setup() { + this.overlayTarget = null; + } + + getActiveOverlayButtons(target) { + if (!isReplaceable(target)) { + this.overlayTarget = null; + return []; + } + + const buttons = []; + this.overlayTarget = target; + buttons.push({ + class: "o_snippet_replace bg-warning fa fa-exchange", + title: _t("Replace"), + handler: this.replaceSnippet.bind(this), + }); + return buttons; + } + + async replaceSnippet() { + const newSnippet = await this.config.replaceSnippet(this.overlayTarget); + if (newSnippet) { + this.overlayTarget = null; + newSnippet.querySelectorAll(".s_dialog_preview").forEach((el) => el.remove()); + // TODO find a way to wait for the images to load before updating or + // to trigger a refresh once the images are loaded afterwards. + // If not possible, call updateContainers with nothing. + this.dependencies.history.addStep(); + this.dependencies["builder-options"].updateContainers(newSnippet); + // TODO post snippet drop (onBuild,...) + } + } +} diff --git a/addons/html_builder/static/src/core/save_plugin.js b/addons/html_builder/static/src/core/save_plugin.js new file mode 100644 index 0000000000000..5138b20d46130 --- /dev/null +++ b/addons/html_builder/static/src/core/save_plugin.js @@ -0,0 +1,177 @@ +import { Plugin } from "@html_editor/plugin"; + +const oeStructureSelector = "#wrapwrap .oe_structure[data-oe-xpath][data-oe-id]"; +const oeFieldSelector = "#wrapwrap [data-oe-field]:not([data-oe-sanitize-prevent-edition])"; +const OE_RECORD_COVER_SELECTOR = "#wrapwrap .o_record_cover_container[data-res-model]"; +const oeCoverSelector = `#wrapwrap .s_cover[data-res-model], ${OE_RECORD_COVER_SELECTOR}`; +const SAVABLE_SELECTOR = `${oeStructureSelector}, ${oeFieldSelector}, ${oeCoverSelector}`; + +export class SavePlugin extends Plugin { + static id = "savePlugin"; + static shared = ["save"]; + + resources = { + handleNewRecords: this.handleMutations, + // Resource definitions: + before_save_handlers: [ + // async () => { + // called at the very beginning of the save process + // } + ], + clean_for_save_handlers: [ + // ({root, preserveSelection = false}) => { + // clean DOM before save (leaving edit mode) + // root is the clone of a node that was o_dirty + // } + ], + save_handlers: [ + // async () => { + // called at the very end of the save process + // } + ], + }; + + async save() { + const proms = []; + for (const fn of this.getResource("before_save_handlers")) { + proms.push(fn()); + } + await Promise.all(proms); + const saveProms = [...this.editable.querySelectorAll(".o_dirty")].map(async (dirtyEl) => { + dirtyEl.classList.remove("o_dirty"); + const cleanedEl = dirtyEl.cloneNode(true); + this.dispatchTo("clean_for_save_handlers", { root: cleanedEl }); + + if (this.config.isTranslation) { + await this.saveTranslationElement(cleanedEl); + } else { + await this.saveView(cleanedEl); + } + }); + // used to track dirty out of the editable scope, like header, footer or wrapwrap + const willSaves = this.getResource("save_handlers").map((c) => c()); + await Promise.all(saveProms.concat(willSaves)); + } + + async saveCoverProperties(el) { + const resModel = el.dataset.resModel; + const resID = Number(el.dataset.resId); + + if (!resModel || !resID) { + throw new Error("There should be a model and id associated to the cover"); + } + + const coverProps = { + "background-image": el.dataset.bgImage, + background_color_class: el.dataset.bgColorClass, + background_color_style: el.dataset.bgColorStyle, + opacity: el.dataset.filterValue, + resize_class: el.dataset.coverClass, + text_align_class: el.dataset.textAlignClass, + }; + + return this.services.orm.write(resModel, [resID], { + cover_properties: JSON.stringify(coverProps), + }); + } + + /** + * Saves one (dirty) element of the page. + * + * @param {HTMLElement} el - the element to save. + */ + async saveView(el) { + const proms = []; + const viewID = Number(el.dataset["oeId"]); + + if (el.classList.contains("o_record_cover_container")) { + proms.push(this.saveCoverProperties(el)); + + if (!viewID) { + return Promise.all(proms); + } + } + + const context = { + website_id: this.services.website.currentWebsite.id, + lang: this.services.website.currentWebsite.metadata.lang, + // TODO: Restore the delay translation feature once it's + // fixed, see commit msg for more info. + delay_translations: false, + }; + + proms.push( + this.services.orm.call( + "ir.ui.view", + "save", + [ + viewID, + el.outerHTML, + (!el.dataset["oeExpression"] && el.dataset["oeXpath"]) || null, + ], + { context } + ) + ); + return Promise.all(proms); + } + + /** + * If the element holds a translation, saves it. Otherwise, fallback to the + * standard saving but with the lang kept. + * + * @param {HTMLElement} el - the element to save. + */ + async saveTranslationElement(el) { + if (el.dataset["oeTranslationSourceSha"]) { + const translations = {}; + translations[this.services.website.currentWebsite.metadata.lang] = { + [el.dataset["oeTranslationSourceSha"]]: el.innerHTML, + }; + return this.services.orm.call(el.dataset["oeModel"], "web_update_field_translations", [ + [Number(el.dataset["oeId"])], + el.dataset["oeField"], + translations, + ]); + } + // TODO: check what we want to modify in translate mode + return this.saveView(el); + } + + /** + * Handles the flag of the closest savable element to the mutation as dirty + * + * @param {Object} records - The observed mutations + * @param {String} currentOperation - The name of the current operation + */ + handleMutations(records, currentOperation) { + if (currentOperation === "undo" || currentOperation === "redo") { + // Do nothing as `o_dirty` has already been handled by the history + // plugin. + return; + } + for (const record of records) { + if (record.attributeName === "contenteditable") { + continue; + } + let targetEl = record.target; + if (!targetEl.isConnected) { + continue; + } + if (targetEl.nodeType !== Node.ELEMENT_NODE) { + targetEl = targetEl.parentElement; + } + if (!targetEl) { + continue; + } + const savableEl = targetEl.closest(SAVABLE_SELECTOR); + if ( + !savableEl || + savableEl.classList.contains("o_dirty") || + savableEl.hasAttribute("data-oe-readonly") + ) { + continue; + } + savableEl.classList.add("o_dirty"); + } + } +} diff --git a/addons/html_builder/static/src/core/save_snippet_plugin.js b/addons/html_builder/static/src/core/save_snippet_plugin.js new file mode 100644 index 0000000000000..58f38022b9dc3 --- /dev/null +++ b/addons/html_builder/static/src/core/save_snippet_plugin.js @@ -0,0 +1,54 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { markup } from "@odoo/owl"; +import { _t } from "@web/core/l10n/translation"; + +const savableSelector = "[data-snippet], a.btn"; +// TODO `so_submit_button_selector` ? +const savableExclude = ".o_no_save, .s_donation_donate_btn, .s_website_form_send"; + +// Checks if the element can be saved as a custom snippet. +function isSavable(el) { + return el.matches(savableSelector) && !el.matches(savableExclude); +} + +export class SaveSnippetPlugin extends Plugin { + static id = "saveSnippet"; + resources = { + get_options_container_top_buttons: withSequence( + 1, + this.getOptionsContainerTopButtons.bind(this) + ), + }; + + getOptionsContainerTopButtons(el) { + if (!isSavable(el)) { + return []; + } + + return [ + { + class: "fa fa-fw fa-save oe_snippet_save o_we_hover_warning btn btn-outline-warning", + title: _t("Save this block to use it elsewhere"), + handler: this.saveSnippet.bind(this), + }, + ]; + } + + async saveSnippet(el) { + const cleanForSaveHandlers = this.getResource("clean_for_save_handlers"); + const savedName = await this.config.saveSnippet(el, cleanForSaveHandlers); + if (savedName) { + const message = markup( + _t( + "Your custom snippet was successfully saved as %s. Find it in your snippets collection.", + savedName + ) + ); + this.services.notification.add(message, { + type: "success", + autocloseDelay: 5000, + }); + } + } +} diff --git a/addons/html_builder/static/src/core/setup_editor_plugin.js b/addons/html_builder/static/src/core/setup_editor_plugin.js new file mode 100644 index 0000000000000..32e43f32c1e3d --- /dev/null +++ b/addons/html_builder/static/src/core/setup_editor_plugin.js @@ -0,0 +1,92 @@ +import { Plugin } from "@html_editor/plugin"; +import { _t } from "@web/core/l10n/translation"; + +export class SetupEditorPlugin extends Plugin { + static id = "setup_editor_plugin"; + static shared = ["getEditableAreas"]; + resources = { + clean_for_save_handlers: this.cleanForSave.bind(this), + normalize_handlers: this.setContenteditable.bind(this), + }; + + setup() { + this.editable.setAttribute("contenteditable", false); + + // Add the `o_editable` class on the editable elements + let editableEls = this.getEditableElements("[data-oe-model]") + .filter((el) => !el.matches("link, script")) + .filter((el) => !el.hasAttribute("data-oe-readonly")) + .filter( + (el) => + !el.matches( + 'img[data-oe-field="arch"], br[data-oe-field="arch"], input[data-oe-field="arch"]' + ) + ) + .filter((el) => !el.classList.contains("oe_snippet_editor")) + .filter((el) => !el.matches("hr, br, input, textarea")) + .filter((el) => !el.hasAttribute("data-oe-sanitize-prevent-edition")); + editableEls.concat(Array.from(this.editable.querySelectorAll(".o_editable"))); + editableEls.forEach((el) => el.classList.add("o_editable")); + + // Add automatic editor message on the editables where we can drag and + // drop elements. + editableEls = this.getEditableElements('.oe_structure.oe_empty, [data-oe-type="html"]'); + editableEls.forEach((el) => { + if (!el.hasAttribute("data-editor-message")) { + el.setAttribute("data-editor-message-default", true); + el.setAttribute("data-editor-message", _t("DRAG BUILDING BLOCKS HERE")); + } + }); + + // Set the `contenteditable` attribute on the editables. + this.setContenteditable(); + } + + getEditableElements(selector) { + const editableEls = [...this.editable.querySelectorAll(selector)] + .filter((el) => !el.matches(".o_not_editable")) + .filter((el) => { + const parent = el.closest(".o_editable, .o_not_editable"); + return !parent || parent.matches(".o_editable"); + }); + return editableEls; + } + + cleanForSave({ root }) { + root.classList.remove("o_editable"); + root.querySelectorAll(".o_editable").forEach((el) => { + el.classList.remove("o_editable"); + }); + + [root, ...root.querySelectorAll("[data-editor-message]")].forEach((el) => { + el.removeAttribute("data-editor-message"); + el.removeAttribute("data-editor-message-default"); + }); + + [root, ...root.querySelectorAll("[contenteditable]")].forEach((el) => + el.removeAttribute("contenteditable") + ); + } + + setContenteditable() { + // TODO: Should be imp, we need to check _getReadOnlyAreas etc + const editableEls = this.getEditableElements(".o_editable"); + editableEls.forEach((el) => el.setAttribute("contenteditable", !el.matches(":empty"))); + } + + /** + * Gets all the editable elements contained in the given root element (or + * the editable if none is specified), including this element. + * + * @param {HTMLElement|undefined} rootEl + * @returns {Array (!el && !checkEditingElement) || (el && el.isConnected); + const handler = () => { + const editingElement = env.getEditingElement(); + if (isValid(editingElement)) { + Object.assign(state, getState(editingElement)); + } + }; + const state = useState({}); + if (onReady) { + onReady.then(() => { + handler(); + }); + } else { + handler(); + } + + useBus(env.editorBus, "DOM_UPDATED", handler); + return state; +} + +export function useActionInfo() { + const comp = useComponent(); + + const getParam = (paramName) => { + let param = comp.props[paramName]; + param = param === undefined ? comp.env.weContext[paramName] : param; + if (typeof param === "object") { + param = JSON.stringify(param); + } + return param; + }; + + const actionParam = getParam("actionParam"); + + return { + actionId: comp.props.action || comp.env.weContext.action, + actionParam, + actionValue: comp.props.actionValue, + classAction: getParam("classAction"), + styleAction: getParam("styleAction"), + styleActionValue: comp.props.styleActionValue, + attributeAction: getParam("attributeAction"), + attributeActionValue: comp.props.attributeActionValue, + }; +} + +function querySelectorAll(targets, selector) { + const elements = new Set(); + for (const target of targets) { + for (const el of target.querySelectorAll(selector)) { + elements.add(el); + } + } + return [...elements]; +} + +export function useBuilderComponent() { + const comp = useComponent(); + const newEnv = {}; + const oldEnv = useEnv(); + let editingElements; + let applyTo = comp.props.applyTo; + const updateEditingElements = () => { + editingElements = applyTo + ? querySelectorAll(oldEnv.getEditingElements(), applyTo) + : oldEnv.getEditingElements(); + }; + updateEditingElements(); + oldEnv.editorBus.addEventListener("UPDATE_EDITING_ELEMENT", updateEditingElements); + onWillUpdateProps((nextProps) => { + if (comp.props.applyTo !== nextProps.applyTo) { + applyTo = nextProps.applyTo; + oldEnv.editorBus.trigger("UPDATE_EDITING_ELEMENT"); + oldEnv.editorBus.trigger("DOM_UPDATED"); + } + }); + onWillDestroy(() => { + oldEnv.editorBus.removeEventListener("UPDATE_EDITING_ELEMENT", updateEditingElements); + }); + newEnv.getEditingElements = () => editingElements; + newEnv.getEditingElement = () => editingElements[0]; + const weContext = {}; + for (const key in basicContainerBuilderComponentProps) { + if (key in comp.props) { + weContext[key] = comp.props[key]; + } + } + if (Object.keys(weContext).length) { + newEnv.weContext = { ...comp.env.weContext, ...weContext }; + } + useSubEnv(newEnv); +} +export function useDependencyDefinition(id, item, { onReady } = {}) { + const comp = useComponent(); + const ignore = comp.env.ignoreBuilderItem; + if (onReady) { + onReady.then(() => { + comp.env.dependencyManager.add(id, item, ignore); + }); + } else { + comp.env.dependencyManager.add(id, item, ignore); + } + + onWillDestroy(() => { + comp.env.dependencyManager.removeByValue(item); + }); +} + +export function useDependencies(dependencies) { + const env = useEnv(); + const isDependenciesVisible = () => { + const deps = Array.isArray(dependencies) ? dependencies : [dependencies]; + return deps.filter(Boolean).every((dependencyId) => { + const match = dependencyId.match(/(!)?(.*)/); + const inverse = !!match[1]; + const id = match[2]; + const isActiveFn = env.dependencyManager.get(id)?.isActive; + if (!isActiveFn) { + return false; + } + const isActive = isActiveFn(); + return inverse ? !isActive : isActive; + }); + }; + return isDependenciesVisible; +} + +function useIsActiveItem() { + const env = useEnv(); + const listenedKeys = new Set(); + + function isActive(itemId) { + const isActiveFn = env.dependencyManager.get(itemId)?.isActive; + if (!isActiveFn) { + return false; + } + return isActiveFn(); + } + + const getState = () => { + const newState = {}; + for (const itemId of listenedKeys) { + newState[itemId] = isActive(itemId); + } + return newState; + }; + const state = useDomState(getState); + const listener = () => { + const newState = getState(); + Object.assign(state, newState); + }; + env.dependencyManager.addEventListener("dependency-updated", listener); + onWillDestroy(() => { + env.dependencyManager.removeEventListener("dependency-updated", listener); + }); + return function isActiveItem(itemId) { + listenedKeys.add(itemId); + if (state[itemId] === undefined) { + return isActive(itemId); + } + return state[itemId]; + }; +} + +export function useGetItemValue() { + const env = useEnv(); + const listenedKeys = new Set(); + + function getValue(itemId) { + const getValueFn = env.dependencyManager.get(itemId)?.getValue; + if (!getValueFn) { + return null; + } + return getValueFn(); + } + + const getState = () => { + const newState = {}; + for (const itemId of listenedKeys) { + newState[itemId] = getValue(itemId); + } + return newState; + }; + const state = useDomState(getState); + const listener = () => { + const newState = getState(); + Object.assign(state, newState); + }; + env.dependencyManager.addEventListener("dependency-updated", listener); + onWillDestroy(() => { + env.dependencyManager.removeEventListener("dependency-updated", listener); + }); + return function getItemValue(itemId) { + listenedKeys.add(itemId); + if (state[itemId] === undefined) { + return getValue(itemId); + } + return state[itemId]; + }; +} + +export function useSelectableComponent(id, { onItemChange } = {}) { + useBuilderComponent(); + const selectableItems = []; + const refreshCurrentItemDebounced = useDebounced(refreshCurrentItem, 0, { immediate: true }); + const env = useEnv(); + + const state = reactive({ + currentSelectedItem: null, + }); + + function refreshCurrentItem() { + let currentItem; + let itemPriority = 0; + for (const selectableItem of selectableItems) { + if (selectableItem.isApplied() && selectableItem.priority >= itemPriority) { + currentItem = selectableItem; + itemPriority = selectableItem.priority; + } + } + if (currentItem && currentItem !== toRaw(state.currentSelectedItem)) { + state.currentSelectedItem = currentItem; + env.dependencyManager.triggerDependencyUpdated(); + } + if (currentItem) { + onItemChange?.(currentItem); + } + } + + if (id) { + useDependencyDefinition(id, { + type: "select", + getSelectableItems: () => selectableItems.slice(0), + }); + } + + onMounted(refreshCurrentItem); + useBus(env.editorBus, "DOM_UPDATED", refreshCurrentItem); + function cleanSelectedItem(...args) { + if (state.currentSelectedItem) { + state.currentSelectedItem.clean(...args); + } + } + + useSubEnv({ + selectableContext: { + cleanSelectedItem, + addSelectableItem: (item) => { + selectableItems.push(item); + }, + removeSelectableItem: (item) => { + const index = selectableItems.indexOf(item); + if (index !== -1) { + selectableItems.splice(index, 1); + } + }, + update: refreshCurrentItemDebounced, + items: selectableItems, + refreshCurrentItem: () => refreshCurrentItem(), + getSelectableState: () => state, + }, + }); +} + +function getReloadTarget(el) { + if (el.closest("header")) { + return "header"; + } + if (el.closest("main")) { + return "main"; + } + if (el.closest("footer")) { + return "footer"; + } + return null; +} + +export function useSelectableItemComponent(id, { getLabel = () => {} } = {}) { + const { operation, isApplied, getActions, priority, clean, onReady } = + useClickableBuilderComponent(); + const env = useEnv(); + + let isSelectableActive = isApplied; + let state; + if (env.selectableContext) { + const selectableState = env.selectableContext.getSelectableState(); + isSelectableActive = () => { + env.selectableContext.refreshCurrentItem(); + return toRaw(selectableState.currentSelectedItem) === selectableItem; + }; + + const selectableItem = { + isApplied, + priority, + getLabel, + clean, + getActions, + }; + + env.selectableContext.addSelectableItem(selectableItem); + state = useState({ + isActive: false, + }); + effect( + ({ currentSelectedItem }) => { + state.isActive = toRaw(currentSelectedItem) === selectableItem; + }, + [selectableState] + ); + env.selectableContext.refreshCurrentItem(); + onMounted(env.selectableContext.update); + onWillDestroy(() => { + env.selectableContext.removeSelectableItem(selectableItem); + }); + } else { + state = useDomState( + () => ({ + isActive: isSelectableActive(), + }), + { onReady } + ); + } + + if (id) { + useDependencyDefinition( + id, + { + isActive: isSelectableActive, + getActions, + cleanSelectedItem: env.selectableContext?.cleanSelectedItem, + }, + { onReady } + ); + } + + return { state, operation }; +} + +function usePrepareAction(getAllActions) { + const env = useEnv(); + const getAction = env.editor.shared.builderActions.getAction; + const asyncActions = []; + for (const descr of getAllActions()) { + if (descr.actionId) { + const action = getAction(descr.actionId); + if (action.prepare) { + asyncActions.push({ action, descr }); + } + } + } + let onReady; + if (asyncActions.length) { + let resolve; + onReady = new Promise((r) => { + resolve = r; + }); + onWillStart(async function () { + await Promise.all(asyncActions.map((obj) => obj.action.prepare(obj.descr))); + resolve(); + }); + onWillUpdateProps(async ({ actionParam, actionValue }) => { + onReady = new Promise((r) => { + resolve = r; + }); + // TODO: should we support updating actionId? + await Promise.all( + asyncActions.map((obj) => + obj.action.prepare({ + ...obj.descr, + actionParam: convertParamToObject(actionParam), + actionValue, + }) + ) + ); + resolve(); + }); + } + return onReady; +} + +function useReloadAction(getAllActions) { + const env = useEnv(); + const getAction = env.editor.shared.builderActions.getAction; + let reload = false; + for (const descr of getAllActions()) { + if (descr.actionId) { + const action = getAction(descr.actionId); + if (action.reload) { + reload = action.reload; + } + } + } + return { reload }; +} + +export function useHasPreview(getAllActions) { + const comp = useComponent(); + const reload = useReloadAction(getAllActions).reload; + const getAction = comp.env.editor.shared.builderActions.getAction; + + let hasPreview = true; + for (const descr of getAllActions()) { + if (descr.actionId) { + const action = getAction(descr.actionId); + if (action.preview === false) { + hasPreview = false; + } + } + } + + return ( + hasPreview && + !reload && + (comp.props.preview === true || + (comp.props.preview === undefined && comp.env.weContext.preview !== false)) + ); +} + +export function useClickableBuilderComponent() { + useBuilderComponent(); + const comp = useComponent(); + const { getAllActions, callOperation, isApplied } = getAllActionsAndOperations(comp); + const getAction = comp.env.editor.shared.builderActions.getAction; + + const onReady = usePrepareAction(getAllActions); + const { reload } = useReloadAction(getAllActions); + + const applyOperation = comp.env.editor.shared.history.makePreviewableAsyncOperation(callApply); + const inheritedActionIds = + comp.props.inheritedActions || comp.env.weContext.inheritedActions || []; + + const hasPreview = useHasPreview(getAllActions); + const operationWithReload = useOperationWithReload(callApply, reload); + + const operation = { + commit: () => { + if (reload) { + callOperation(operationWithReload); + } else { + callOperation(applyOperation.commit); + } + }, + preview: () => { + callOperation(applyOperation.preview, { + operationParams: { + cancellable: true, + cancelPrevious: () => applyOperation.revert(), + }, + }); + }, + revert: () => { + // The `next` will cancel the previous operation, which will revert + // the operation in case of a preview. + comp.env.editor.shared.operation.next(); + }, + }; + + if (!hasPreview) { + operation.preview = () => {}; + } + + function clean(nextApplySpecs) { + for (const { actionId, actionParam, actionValue } of getAllActions()) { + for (const editingElement of comp.env.getEditingElements()) { + let nextAction; + getAction(actionId).clean?.({ + editingElement, + param: actionParam, + value: actionValue, + dependencyManager: comp.env.dependencyManager, + selectableContext: comp.env.selectableContext, + get nextAction() { + nextAction = + nextAction || nextApplySpecs.find((a) => a.actionId === actionId) || {}; + return { + param: nextAction.actionParam, + value: nextAction.actionValue, + }; + }, + }); + } + } + } + + async function callApply(applySpecs) { + comp.env.selectableContext?.cleanSelectedItem(applySpecs); + const cleans = inheritedActionIds + .map((actionId) => comp.env.dependencyManager.get(actionId).cleanSelectedItem) + .filter(Boolean); + for (const clean of new Set(cleans)) { + clean(applySpecs); + } + const proms = []; + const isAlreadyApplied = isApplied(); + for (const applySpec of applySpecs) { + const hasClean = !!applySpec.clean; + const shouldClean = _shouldClean(comp, hasClean, isAlreadyApplied); + if (shouldClean) { + proms.push( + applySpec.clean({ + editingElement: applySpec.editingElement, + param: applySpec.actionParam, + value: applySpec.actionValue, + loadResult: applySpec.loadOnClean ? applySpec.loadResult : null, + dependencyManager: comp.env.dependencyManager, + selectableContext: comp.env.selectableContext, + }) + ); + } else { + proms.push( + applySpec.apply({ + editingElement: applySpec.editingElement, + param: applySpec.actionParam, + value: applySpec.actionValue, + loadResult: applySpec.loadResult, + dependencyManager: comp.env.dependencyManager, + selectableContext: comp.env.selectableContext, + }) + ); + } + } + await Promise.all(proms); + } + function getPriority() { + return ( + getAllActions() + .map( + (a) => + getAction(a.actionId).getPriority?.({ + param: a.actionParam, + value: a.actionValue, + }) || 0 + ) + .find((x) => x !== 0) || 0 + ); + } + + return { + operation, + isApplied, + clean, + priority: getPriority(), + getActions: getAllActions, + onReady, + }; +} +function useOperationWithReload(callApply, reload) { + const env = useEnv(); + return async (...args) => { + const { editingElement } = args[0][0]; + await Promise.all([callApply(...args), env.editor.shared.savePlugin.save()]); + let target = getReloadTarget(editingElement); + const url = reload.getReloadUrl?.(); + const selector = reload.getReloadSelector?.(); + if (selector && editingElement.closest(selector)) { + target = selector; + } + env.editor.config.reloadEditor({ target, url }); + }; +} +export function useInputBuilderComponent({ + id, + defaultValue, + formatRawValue = (rawValue) => rawValue, + parseDisplayValue = (displayValue) => displayValue, +} = {}) { + const comp = useComponent(); + const { getAllActions, callOperation } = getAllActionsAndOperations(comp); + const getAction = comp.env.editor.shared.builderActions.getAction; + const state = useDomState(getState); + + const onReady = usePrepareAction(getAllActions); + const { reload } = useReloadAction(getAllActions); + + async function callApply(applySpecs) { + const proms = []; + for (const applySpec of applySpecs) { + proms.push( + applySpec.apply({ + editingElement: applySpec.editingElement, + param: applySpec.actionParam, + value: applySpec.actionValue, + loadResult: applySpec.loadResult, + dependencyManager: comp.env.dependencyManager, + }) + ); + } + await Promise.all(proms); + } + + const applyOperation = comp.env.editor.shared.history.makePreviewableAsyncOperation(callApply); + const operationWithReload = useOperationWithReload(callApply, reload); + function getState(editingElement) { + if (!editingElement || !editingElement.isConnected) { + // TODO try to remove it. We need to move hook in BuilderComponent + return {}; + } + const actionWithGetValue = getAllActions().find( + ({ actionId }) => getAction(actionId).getValue + ); + const { actionId, actionParam } = actionWithGetValue; + const actionValue = getAction(actionId).getValue({ editingElement, param: actionParam }); + return { + value: actionValue, + }; + } + + function commit(userInputValue) { + if (defaultValue !== undefined) { + userInputValue ||= formatRawValue(defaultValue); + } + const rawValue = parseDisplayValue(userInputValue); + if (reload) { + callOperation(operationWithReload, { userInputValue: rawValue }); + } else { + callOperation(applyOperation.commit, { userInputValue: rawValue }); + } + // If the parsed value is not equivalent to the user input, we want to + // normalize the displayed value. It is useful in cases of invalid + // input and allows to fall back to the output of parseDisplayValue. + return rawValue !== undefined ? formatRawValue(rawValue) : ""; + } + + const shouldPreview = useHasPreview(getAllActions); + function preview(userInputValue) { + if (shouldPreview) { + callOperation(applyOperation.preview, { + userInputValue: parseDisplayValue(userInputValue), + operationParams: { + cancellable: true, + cancelPrevious: () => applyOperation.revert(), + }, + }); + } + } + + if (id) { + useDependencyDefinition( + id, + { + type: "input", + getValue: () => state.value, + }, + { onReady } + ); + } + + return { + state, + commit, + preview, + onReady, + }; +} + +export function useApplyVisibility(refName) { + const ref = useRef(refName); + return (hasContent) => { + ref.el?.classList.toggle("d-none", !hasContent); + }; +} + +export function useVisibilityObserver(contentName, callback) { + const contentRef = useRef(contentName); + + const applyVisibility = () => { + const hasContent = [...contentRef.el.childNodes].some( + (el) => + (isTextNode(el) && el.textContent !== "") || + (isElement(el) && !el.classList.contains("d-none")) + ); + callback(hasContent); + }; + + const observer = new MutationObserver(applyVisibility); + useEffect( + (contentEl) => { + if (!contentEl) { + return; + } + applyVisibility(); + observer.observe(contentEl, { + subtree: true, + attributes: true, + childList: true, + attributeFilter: ["class"], + }); + return () => { + observer.disconnect(); + }; + }, + () => [contentRef.el] + ); +} + +export const basicContainerBuilderComponentProps = { + id: { type: String, optional: true }, + applyTo: { type: String, optional: true }, + preview: { type: Boolean, optional: true }, + inheritedActions: { type: Array, element: String, optional: true }, + // preview: { type: Boolean, optional: true }, + // reloadPage: { type: Boolean, optional: true }, + + action: { type: String, optional: true }, + actionParam: { validate: () => true, optional: true }, + + // Shorthand actions. + classAction: { validate: () => true, optional: true }, + attributeAction: { validate: () => true, optional: true }, + dataAttributeAction: { validate: () => true, optional: true }, + styleAction: { validate: () => true, optional: true }, +}; +const validateIsNull = { validate: (value) => value === null }; + +export const clickableBuilderComponentProps = { + ...basicContainerBuilderComponentProps, + inverseAction: { type: Boolean, optional: true }, + + actionValue: { + type: [Boolean, String, Number, { type: Array, element: [Boolean, String, Number] }], + optional: true, + }, + + // Shorthand actions values. + classActionValue: { type: [String, Array, validateIsNull], optional: true }, + attributeActionValue: { type: [String, Array, validateIsNull], optional: true }, + dataAttributeActionValue: { type: [String, Array, validateIsNull], optional: true }, + styleActionValue: { type: [String, Array, validateIsNull], optional: true }, + + inheritedActions: { type: Array, element: String, optional: true }, +}; + +export function getAllActionsAndOperations(comp) { + const inheritedActionIds = + comp.props.inheritedActions || comp.env.weContext.inheritedActions || []; + + function getActionsSpecs(actions, userInputValue) { + const getAction = comp.env.editor.shared.builderActions.getAction; + const specs = []; + for (let { actionId, actionParam, actionValue } of actions) { + const action = getAction(actionId); + // Take the action value defined by the clickable or the input given + // by the user. + actionValue = actionValue === undefined ? userInputValue : actionValue; + for (const editingElement of comp.env.getEditingElements()) { + specs.push({ + editingElement, + actionId, + actionParam, + actionValue, + apply: action.apply, + clean: action.clean, + load: action.load, + loadOnClean: action.loadOnClean, + }); + } + } + return specs; + } + function getShorthandActions() { + const actions = []; + const shorthands = [ + ["classAction", "classActionValue"], + ["attributeAction", "attributeActionValue"], + ["dataAttributeAction", "dataAttributeActionValue"], + ["styleAction", "styleActionValue"], + ]; + for (const [actionId, actionValue] of shorthands) { + const actionParam = comp.env.weContext[actionId] || comp.props[actionId]; + if (actionParam !== undefined) { + actions.push({ + actionId, + actionParam: convertParamToObject(actionParam), + actionValue: comp.props[actionValue], + }); + } + } + return actions; + } + function getCustomAction() { + const actionId = comp.props.action || comp.env.weContext.action; + if (actionId) { + const actionParam = comp.props.actionParam ?? comp.env.weContext.actionParam; + return { + actionId: actionId, + actionParam: convertParamToObject(actionParam), + actionValue: comp.props.actionValue, + }; + } + } + function getAllActions() { + const actions = getShorthandActions(); + + const { actionId, actionParam, actionValue } = getCustomAction() || {}; + if (actionId) { + actions.push({ actionId, actionParam, actionValue }); + } + const inheritedActions = + inheritedActionIds + .map( + (actionId) => + comp.env.dependencyManager + // The dependency might not be loaded yet. + .get(actionId) + ?.getActions?.() || [] + ) + .flat() || []; + return actions.concat(inheritedActions || []); + } + function callOperation(fn, params = {}) { + const actionsSpecs = getActionsSpecs(getAllActions(), params.userInputValue); + comp.env.editor.shared.operation.next(() => fn(actionsSpecs), { + load: async () => + Promise.all( + actionsSpecs.map(async (applySpec) => { + if (!applySpec.load) { + return; + } + const hasClean = !!applySpec.clean; + if (!applySpec.loadOnClean && _shouldClean(comp, hasClean, isApplied())) { + // The element will be cleaned, do not load + return; + } + const result = await applySpec.load({ + editingElement: applySpec.editingElement, + param: applySpec.actionParam, + value: applySpec.actionValue, + }); + applySpec.loadResult = result; + }) + ), + ...params.operationParams, + }); + } + function isApplied() { + const getAction = comp.env.editor.shared.builderActions.getAction; + const editingElements = comp.env.getEditingElements(); + if (!editingElements.length) { + return; + } + const areActionsActiveTabs = getAllActions().map((o) => { + const { actionId, actionParam, actionValue } = o; + // TODO isApplied === first editing el or all ? + const editingElement = editingElements[0]; + if (!editingElement || !editingElement.isConnected) { + return false; + } + const isApplied = getAction(actionId).isApplied?.({ + editingElement, + param: actionParam, + value: actionValue, + }); + return comp.props.inverseAction ? !isApplied : isApplied; + }); + // If there is no `isApplied` method for the widget return false + if (areActionsActiveTabs.every((el) => el === undefined)) { + return false; + } + // If `isApplied` is explicitly false for an action return false + if (areActionsActiveTabs.some((el) => el === false)) { + return false; + } + // `isApplied` is true for at least one action + return true; + } + return { + getAllActions: getAllActions, + callOperation: callOperation, + isApplied: isApplied, + }; +} +function _shouldClean(comp, hasClean, isApplied) { + if (!hasClean) { + return false; + } + const shouldToggle = !comp.env.selectableContext; + const shouldClean = shouldToggle && isApplied; + return comp.props.inverseAction ? !shouldClean : shouldClean; +} +export function convertParamToObject(param) { + if (param === undefined) { + param = {}; + } else if (param instanceof Array || param instanceof Function || !(param instanceof Object)) { + param = { + ["mainParam"]: param, + }; + } + return param; +} +export class BaseOptionComponent extends Component { + static components = {}; + + setup() { + this.isActiveItem = useIsActiveItem(); + const comp = useComponent(); + const editor = comp.env.editor; + if (!comp.constructor.components) { + comp.constructor.components = {}; + } + const Components = editor.shared.builderComponents.getComponents(); + Object.assign(comp.constructor.components, Components); + } +} diff --git a/addons/html_builder/static/src/core/utils/update_on_img_changed.js b/addons/html_builder/static/src/core/utils/update_on_img_changed.js new file mode 100644 index 0000000000000..04606f19cf4e1 --- /dev/null +++ b/addons/html_builder/static/src/core/utils/update_on_img_changed.js @@ -0,0 +1,69 @@ +import { Component, onWillStart, xml } from "@odoo/owl"; +import { useDomState } from "../utils"; + +class LoadImgComponent extends Component { + static template = xml` + + `; + static props = { slots: { type: Object } }; + + setup() { + onWillStart(async () => { + const editingElements = this.env.getEditingElements(); + const promises = []; + for (const editingEl of editingElements) { + const imageEls = editingEl.matches("img") + ? [editingEl] + : editingEl.querySelectorAll("img"); + for (const imageEl of imageEls) { + if (!imageEl.complete) { + promises.push( + new Promise((resolve) => { + imageEl.addEventListener("load", () => resolve()); + }) + ); + } + } + } + await Promise.all(promises); + }); + } +} + +/** + * In Chrome, when replacing an image on the DOM, some image properties are not + * available even if the image has been loaded beforehand. This is a problem if + * an option is using one of those property at each DOM change (useDomState). + * To solve the problem, this component reloads the option (and waits for the + * images to be loaded) each time an image has been modified inside its editing + * element. + */ +export class UpdateOptionOnImgChanged extends Component { + // TODO: this is a hack until is + // fixed in OWL. + static template = xml` + + + `; + static props = { slots: { type: Object } }; + static components = { LoadImgComponent }; + + setup() { + let boolean = true; + this.state = useDomState((editingElement) => { + const imageEls = editingElement.matches("img") + ? [editingElement] + : editingElement.querySelectorAll("img"); + for (const imageEl of imageEls) { + if (!imageEl.complete) { + // Rerender the slot if an image is not loaded + boolean = !boolean; + break; + } + } + return { + bool: boolean, + }; + }); + } +} diff --git a/addons/html_builder/static/src/core/version_control_plugin.js b/addons/html_builder/static/src/core/version_control_plugin.js new file mode 100644 index 0000000000000..38713384b7f49 --- /dev/null +++ b/addons/html_builder/static/src/core/version_control_plugin.js @@ -0,0 +1,42 @@ +import { Plugin } from "@html_editor/plugin"; + +export class VersionControlPlugin extends Plugin { + static id = "versionControl"; + static dependencies = ["builder-options"]; + accessPerOutdatedEl = new WeakMap(); + static shared = ["hasAccessToOutdatedEl", "giveAccessToOutdatedEl", "replaceWithNewVersion"]; + + hasAccessToOutdatedEl(el) { + if (!el.dataset.snippet) { + return true; + } + if (this.accessPerOutdatedEl.has(el)) { + return this.accessPerOutdatedEl.get(el); + } + const snippetKey = el.dataset.snippet; + const snippet = this.services["html_builder.snippets"].getOriginalSnippet(snippetKey); + let isUpToDate = true; + if (snippet) { + const { + vcss: originalVcss, + vxml: originalVxml, + vjs: originalVjs, + } = snippet.content.dataset; + const { vcss: elVcss, vxml: elVxml, vjs: elVjs } = el.dataset; + isUpToDate = + originalVcss === elVcss && originalVxml === elVxml && originalVjs === elVjs; + } + this.accessPerOutdatedEl.set(el, isUpToDate); + return isUpToDate; + } + giveAccessToOutdatedEl(el) { + this.accessPerOutdatedEl.set(el, true); + } + replaceWithNewVersion(el) { + const snippetKey = el.dataset.snippet; + const snippet = this.services["html_builder.snippets"].getOriginalSnippet(snippetKey); + const cloneEl = snippet.content.cloneNode(true); + el.replaceWith(cloneEl); + this.dependencies["builder-options"].updateContainers(cloneEl); + } +} diff --git a/addons/html_builder/static/src/core/visibility_plugin.js b/addons/html_builder/static/src/core/visibility_plugin.js new file mode 100644 index 0000000000000..7805fd3641dae --- /dev/null +++ b/addons/html_builder/static/src/core/visibility_plugin.js @@ -0,0 +1,145 @@ +import { Plugin } from "@html_editor/plugin"; +import { isMobileView } from "@html_builder/utils/utils"; + +export class VisibilityPlugin extends Plugin { + static id = "visibility"; + static dependencies = ["builder-options", "disableSnippets"]; + static shared = [ + "toggleTargetVisibility", + "cleanForSaveVisibility", + "onOptionVisibilityUpdate", + ]; + resources = { + on_mobile_preview_clicked: this.onMobilePreviewClicked.bind(this), + system_attributes: ["data-invisible"], + system_classes: ["o_snippet_override_invisible"], + }; + + setup() { + // Add the `data-invisible="1"` attribute on the elements that are + // really hidden, and remove it from the ones that are in fact visible, + // depending on if we are in mobile preview or not, so the DOM is + // consistent. + const isMobilePreview = isMobileView(this.editable); + this.editable + .querySelectorAll(".o_snippet_mobile_invisible, .o_snippet_desktop_invisible") + .forEach((invisibleEl) => { + const isMobileHidden = invisibleEl.matches(".o_snippet_mobile_invisible"); + const isDesktopHidden = invisibleEl.matches(".o_snippet_desktop_invisible"); + if ((isMobileHidden && isMobilePreview) || (isDesktopHidden && !isMobilePreview)) { + invisibleEl.setAttribute("data-invisible", "1"); + } else { + invisibleEl.removeAttribute("data-invisible"); + } + }); + } + + cleanForSaveVisibility(editingEl) { + const show = + !editingEl.classList.contains("o_snippet_invisible") && + !editingEl.classList.contains("o_snippet_mobile_invisible") && + !editingEl.classList.contains("o_snippet_desktop_invisible"); + this.toggleTargetVisibility(editingEl, show); + const overrideInvisibleEls = [ + editingEl, + ...editingEl.querySelectorAll(".o_snippet_override_invisible"), + ]; + for (const overrideInvisibleEl of overrideInvisibleEls) { + overrideInvisibleEl.classList.remove("o_snippet_override_invisible"); + } + + // Remove data-invisible attribute from condtionally hidden elements. + // TODO do it for all invisible elements in general ? + const conditionalHiddenEls = [ + ...editingEl.querySelectorAll("[data-visibility='conditional']"), + ]; + if (editingEl.matches("[data-visibility='conditional']")) { + conditionalHiddenEls.unshift(editingEl); + } + conditionalHiddenEls.forEach((el) => el.removeAttribute("data-invisible")); + } + + onMobilePreviewClicked() { + const isMobilePreview = isMobileView(this.editable); + const invisibleOverrideEls = this.editable.querySelectorAll( + ".o_snippet_mobile_invisible, .o_snippet_desktop_invisible" + ); + for (const invisibleOverrideEl of [...invisibleOverrideEls]) { + const isMobileHidden = invisibleOverrideEl.classList.contains( + "o_snippet_mobile_invisible" + ); + invisibleOverrideEl.classList.remove("o_snippet_override_invisible"); + const show = isMobilePreview !== isMobileHidden; + this.toggleVisibilityStatus(invisibleOverrideEl, show); + } + } + + /** + * Toggles the visibility of the given element. + * + * @param {HTMLElement} editingEl + * @param {Boolean} show true to show the element, false to hide it + * @param {Boolean} considerDeviceVisibility + * @returns {Boolean} + */ + toggleTargetVisibility(editingEl, show, considerDeviceVisibility) { + show = this.toggleVisibilityStatus(editingEl, show, considerDeviceVisibility); + const dispatchName = show ? "target_show" : "target_hide"; + this.dispatchTo(dispatchName, editingEl); + return show; + } + + /** + * Called when an option changed the visibility of its editing element. + * + * @param {HTMLElement} editingEl the editing element + * @param {Boolean} show true/false if the element was shown/hidden + */ + onOptionVisibilityUpdate(editingEl, show) { + const isShown = this.toggleVisibilityStatus(editingEl, show); + + if (!isShown) { + this.dependencies["builder-options"].deactivateContainers(); + } + this.config.updateInvisibleElementsPanel(); + this.dependencies.disableSnippets.disableUndroppableSnippets(); + } + + /** + * Sets/removes the `data-invisible` attribute on the given element, + * depending on if it is considered as hidden/shown. + * + * @param {HTMLElement} editingEl the element + * @param {Boolean} show + * @param {Boolean} considerDeviceVisibility + * @returns {Boolean} + */ + toggleVisibilityStatus(editingEl, show, considerDeviceVisibility) { + if ( + considerDeviceVisibility && + editingEl.matches(".o_snippet_mobile_invisible, .o_snippet_desktop_invisible") + ) { + const isMobilePreview = isMobileView(editingEl); + const isMobileHidden = editingEl.classList.contains("o_snippet_mobile_invisible"); + if (isMobilePreview === isMobileHidden) { + // If the preview mode and the hidden type are the same, the + // element is considered as hidden. + show = false; + } + } + + if (show === undefined) { + show = !isTargetVisible(editingEl); + } + if (show) { + delete editingEl.dataset.invisible; + } else { + editingEl.dataset.invisible = "1"; + } + return show; + } +} + +function isTargetVisible(editingEl) { + return editingEl.dataset.invisible !== "1"; +} diff --git a/addons/html_builder/static/src/interactions/carousel.edit.js b/addons/html_builder/static/src/interactions/carousel.edit.js new file mode 100644 index 0000000000000..79feddccb9ac6 --- /dev/null +++ b/addons/html_builder/static/src/interactions/carousel.edit.js @@ -0,0 +1,85 @@ +import { Interaction } from "@web/public/interaction"; +import { registry } from "@web/core/registry"; + +export class CarouselEdit extends Interaction { + static selector = "section > .carousel"; + // Prevent enabling the carousel overlay when clicking on the carousel + // controls (indeed we want it to change the carousel slide then enable + // the slide overlay) + See "CarouselItem" option. + dynamicContent = { + ".carousel-control-prev, .carousel-control-next, .carousel-indicators": { + "t-on-click": this.throttled(this.onControlClick), + "t-on-keydown": this.onControlKeyDown, + "t-att-class": () => ({ o_we_no_overlay: true }), + }, + ".carousel-control-prev, .carousel-control-next": { + "t-att-data-bs-slide": () => undefined, + }, + ".carousel-indicators > *": { + "t-att-data-bs-slide-to": () => undefined, + }, + }; + + /** + * Slides the carousel when clicking on the carousel controls. This handler + * allows to put the sliding in the mutex, to avoid race conditions. + * + * @param {Event} ev + */ + async onControlClick(ev) { + // Compute to which slide the carousel will slide. + const controlEl = ev.currentTarget; + let direction; + if (controlEl.classList.contains("carousel-control-prev")) { + direction = "prev"; + } else if (controlEl.classList.contains("carousel-control-next")) { + direction = "next"; + } else { + const indicatorEl = ev.target; + if ( + !indicatorEl.matches(".carousel-indicators > *") || + indicatorEl.classList.contains("active") + ) { + return; + } + direction = [...controlEl.children].indexOf(indicatorEl); + } + + // Slide the carousel + const editingCarousel = this.el; + const applySpec = { editingElement: editingCarousel, direction: direction }; + + if (this.services["website_edit"].applyAction) { + this.services["website_edit"].applyAction("slideCarousel", applySpec); + } + } + + /** + * Since carousel controls are disabled in edit mode because slides are + * handled manually, we disable the left and right keydown events to prevent + * sliding this way. + * + * @param {Event} ev + */ + onControlKeyDown(ev) { + if (["ArrowLeft", "ArrowRight"].includes(ev.code)) { + ev.preventDefault(); + ev.stopPropagation(); + } + } + + destroy() { + const editTranslations = this.services.website_edit.isEditingTranslations(); + if (!editTranslations) { + // Restore the carousel controls. + const indicatorEls = this.el.querySelectorAll(".carousel-indicators > *"); + indicatorEls.forEach((indicatorEl, i) => + indicatorEl.setAttribute("data-bs-slide-to", i) + ); + } + } +} + +registry.category("public.interactions.edit").add("html_builder.carousel_edit", { + Interaction: CarouselEdit, +}); diff --git a/addons/html_builder/static/src/interactions/google_map.edit.js b/addons/html_builder/static/src/interactions/google_map.edit.js new file mode 100644 index 0000000000000..034514ee20d66 --- /dev/null +++ b/addons/html_builder/static/src/interactions/google_map.edit.js @@ -0,0 +1,85 @@ +/* global google */ + +import { GoogleMap } from "@website/snippets/s_google_map/google_map"; +import { registry } from "@web/core/registry"; + +const GoogleMapsEdit = (I) => + class extends I { + setup() { + super.setup(); + this.canSpecifyKey = true; + this.websiteEditService = this.services.website_edit; + this.websiteMapService = this.services.website_map; + } + + async willStart() { + const isLoaded = + (typeof google === "object" && + typeof google.maps === "object" && + !this.websiteEditService.callShared( + "googleMapsOption", + "shouldRefetchApiKey" + )) || + (await this.loadGoogleMaps(false)); + if (isLoaded) { + this.canStart = await this.websiteEditService.callShared( + "googleMapsOption", + "initializeGoogleMaps", + [this.el, google.maps] + ); + } + } + + /** + * Get the stored API key if any (or open a dialog to ask the user for one), + * load and configure the Google Maps API. + * + * @param {boolean} [forceReconfigure=false] + * @returns {Promise} + */ + async loadGoogleMaps(forceReconfigure = false) { + /** @type {string | undefined} */ + const apiKey = await this.websiteMapService.getGMapAPIKey(true); + const apiKeyValidation = await this.websiteMapService.validateGMapApiKey(apiKey); + const shouldReconfigure = forceReconfigure || !apiKeyValidation.isValid; + let didReconfigure = false; + if (shouldReconfigure) { + didReconfigure = await this.websiteEditService.callShared( + "googleMapsOption", + "configureGMapsAPI", + apiKey + ); + if (!didReconfigure) { + this.websiteEditService.callShared("remove", "removeElement", this.el); + } + } + if (!shouldReconfigure || didReconfigure) { + const shouldRefetch = this.websiteEditService.callShared( + "googleMapsOption", + "shouldRefetchApiKey" + ); + return !!(await this.loadGoogleMapsAPIFromService(shouldRefetch || didReconfigure)); + } else { + return false; + } + } + + /** + * Load the Google Maps API from the Google Map Service. + * This method is set apart so it can be overridden for testing. + * + * @param {boolean} [shouldRefetch] + * @returns {Promise} A promise that resolves to an API + * key if found. + */ + async loadGoogleMapsAPIFromService(shouldRefetch) { + const apiKey = await this.websiteMapService.loadGMapAPI(true, shouldRefetch); + this.websiteEditService.callShared("googleMapsOption", "shouldNotRefetchApiKey"); + return !!apiKey; + } + }; + +registry.category("public.interactions.edit").add("html_builder.google_map", { + Interaction: GoogleMap, + mixin: GoogleMapsEdit, +}); diff --git a/addons/html_builder/static/src/interactions/image_gallery.edit.js b/addons/html_builder/static/src/interactions/image_gallery.edit.js new file mode 100644 index 0000000000000..8aa98ed5b9875 --- /dev/null +++ b/addons/html_builder/static/src/interactions/image_gallery.edit.js @@ -0,0 +1,22 @@ +import { Interaction } from "@web/public/interaction"; +import { registry } from "@web/core/registry"; + +export class ImageGalleryEdit extends Interaction { + static selector = ".s_image_gallery"; + dynamicContent = { + ".o_empty_gallery_alert": { + "t-on-click": this.onAddImage.bind(this), + }, + }; + setup() { + this.renderAt("html_builder.empty_image_gallery_alert", {}, this.el); + } + onAddImage() { + const applySpec = { editingElement: this.el }; + this.services["website_edit"].applyAction("addImage", applySpec); + } +} + +registry.category("public.interactions.edit").add("html_builder.image_gallery_edit", { + Interaction: ImageGalleryEdit, +}); diff --git a/addons/html_builder/static/src/interactions/image_gallery.edit.xml b/addons/html_builder/static/src/interactions/image_gallery.edit.xml new file mode 100644 index 0000000000000..aae585c0f1b8a --- /dev/null +++ b/addons/html_builder/static/src/interactions/image_gallery.edit.xml @@ -0,0 +1,13 @@ + + + + +
+
+ + Add Images +
+
+ + + diff --git a/addons/html_builder/static/src/interactions/social_media.edit.js b/addons/html_builder/static/src/interactions/social_media.edit.js new file mode 100644 index 0000000000000..d7c487b6248ac --- /dev/null +++ b/addons/html_builder/static/src/interactions/social_media.edit.js @@ -0,0 +1,14 @@ +import { Interaction } from "@web/public/interaction"; +import { registry } from "@web/core/registry"; + +export class SocialMediaEdit extends Interaction { + static selector = ".s_social_media > :first-child"; + + setup() { + this.renderAt("html_builder.empty_social_media_alert", {}, undefined, "afterend"); + } +} + +registry.category("public.interactions.edit").add("html_builder.social_media_edit", { + Interaction: SocialMediaEdit, +}); diff --git a/addons/html_builder/static/src/interactions/social_media.edit.xml b/addons/html_builder/static/src/interactions/social_media.edit.xml new file mode 100644 index 0000000000000..d87a8832eeaeb --- /dev/null +++ b/addons/html_builder/static/src/interactions/social_media.edit.xml @@ -0,0 +1,10 @@ + + + + +
+ Click here to setup your social networks +
+ + + diff --git a/addons/html_builder/static/src/plugins/alert_option.xml b/addons/html_builder/static/src/plugins/alert_option.xml new file mode 100644 index 0000000000000..5aa037ef4087e --- /dev/null +++ b/addons/html_builder/static/src/plugins/alert_option.xml @@ -0,0 +1,19 @@ + + + + + + + Primary + Secondary + Info + Success + Warning + Danger + Light + Dark + + + + + diff --git a/addons/html_builder/static/src/plugins/alert_option_plugin.js b/addons/html_builder/static/src/plugins/alert_option_plugin.js new file mode 100644 index 0000000000000..7acd3d60fdd2d --- /dev/null +++ b/addons/html_builder/static/src/plugins/alert_option_plugin.js @@ -0,0 +1,46 @@ +import { Plugin } from "@html_editor/plugin"; +import { fonts } from "@html_editor/utils/fonts"; +import { registry } from "@web/core/registry"; +import { withSequence } from "@html_editor/utils/resource"; + +class AlertOptionPlugin extends Plugin { + static id = "alertOption"; + resources = { + builder_actions: { + alertIcon: { + apply: ({ editingElement, param: { mainParam: className } }) => { + const icon = editingElement.querySelector(".s_alert_icon"); + if (!icon) { + return; + } + fonts.computeFonts(); + const allFaIcons = fonts.fontIcons[0].alias; + icon.classList.remove(...allFaIcons); + icon.classList.add(className); + }, + clean: ({ editingElement, param: { mainParam: className } }) => { + const icon = editingElement.querySelector(".s_alert_icon"); + if (!icon) { + return; + } + icon.classList.remove(className); + }, + isApplied: ({ editingElement, param: { mainParam: className } }) => { + const iconEl = editingElement.querySelector(".s_alert_icon"); + if (!iconEl) { + return; + } + return iconEl.classList.contains(className); + }, + }, + }, + builder_options: [ + withSequence(5, { + template: "html_builder.AlertOption", + selector: ".s_alert", + }), + ], + so_content_addition_selector: [".s_alert"], + }; +} +registry.category("website-plugins").add(AlertOptionPlugin.id, AlertOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/background_option/background_hook.js b/addons/html_builder/static/src/plugins/background_option/background_hook.js new file mode 100644 index 0000000000000..ca4c34b32b25a --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_hook.js @@ -0,0 +1,3 @@ +export function useBackgroundOption(isActiveItem) { + return { showColorFilter: () => isActiveItem("toggle_bg_image_id") }; +} diff --git a/addons/html_builder/static/src/plugins/background_option/background_image.xml b/addons/html_builder/static/src/plugins/background_option/background_image.xml new file mode 100644 index 0000000000000..2b6f2311d700b --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_image.xml @@ -0,0 +1,15 @@ + + + + + + Replace + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/background_option/background_image_option.js b/addons/html_builder/static/src/plugins/background_option/background_image_option.js new file mode 100644 index 0000000000000..cc375dcc928b2 --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_image_option.js @@ -0,0 +1,37 @@ +import { BaseOptionComponent } from "@html_builder/core/utils"; +import { getBgImageURLFromEl, normalizeColor } from "@html_builder/utils/utils_css"; + +export class BackgroundImageOption extends BaseOptionComponent { + static template = "html_builder.BackgroundImageOption"; + static props = {}; + showMainColorPicker() { + const editingEl = this.env.getEditingElement(); + const src = new URL(getBgImageURLFromEl(editingEl), window.location.origin); + return ( + src.origin === window.location.origin && + (src.pathname.startsWith("/html_editor/shape/") || + src.pathname.startsWith("/web_editor/shape/")) + ); + } + getColorPickerColorNames() { + const colorNames = []; + const editingEl = this.env.getEditingElement(); + for (let nbr = 1; nbr <= 5; nbr++) { + const colorName = `c${nbr}`; + if (getBackgroundImageColor(editingEl, colorName)) { + colorNames.push(colorName); + } + } + return colorNames; + } +} + +export function getBackgroundImageColor(editingEl, colorName) { + const backgroundImageColor = new URL( + getBgImageURLFromEl(editingEl), + window.location.origin + ).searchParams.get(colorName); + if (backgroundImageColor) { + return normalizeColor(backgroundImageColor); + } +} diff --git a/addons/html_builder/static/src/plugins/background_option/background_image_option_plugin.js b/addons/html_builder/static/src/plugins/background_option/background_image_option_plugin.js new file mode 100644 index 0000000000000..7e5f9dc142f9d --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_image_option_plugin.js @@ -0,0 +1,184 @@ +import { getValueFromVar } from "@html_builder/utils/utils"; +import { getBgImageURLFromEl, isBackgroundImageAttribute } from "@html_builder/utils/utils_css"; +import { Plugin } from "@html_editor/plugin"; +import { removeOnImageChangeAttrs } from "@html_editor/utils/image_processing"; +import { registry } from "@web/core/registry"; +import { convertCSSColorToRgba } from "@web/core/utils/colors"; +import { getBackgroundImageColor } from "./background_image_option"; + +// TODO: support the setTarget + +export class BackgroundImageOptionPlugin extends Plugin { + static id = "backgroundImageOption"; + static dependencies = ["builderActions", "media", "coreBuilderAction"]; + static shared = ["changeEditingEl"]; + resources = { + builder_actions: this.getActions(), + }; + getActions() { + return { + selectFilterColor: { + apply: ({ editingElement, value }) => { + // Find the filter element. + let filterEl = editingElement.querySelector(":scope > .o_we_bg_filter"); + + // If the filter would be transparent, remove it / don't create it. + const rgba = value && convertCSSColorToRgba(value); + if (!value || (rgba && rgba.opacity < 0.001)) { + if (filterEl) { + filterEl.remove(); + } + return; + } + + // Create the filter if necessary. + if (!filterEl) { + filterEl = document.createElement("div"); + filterEl.classList.add("o_we_bg_filter"); + let lastBackgroundEl; + for (const fn of this.getResource("background_filter_target_providers")) { + lastBackgroundEl = fn(editingElement); + if (lastBackgroundEl) { + break; + } + } + if (lastBackgroundEl) { + lastBackgroundEl.insertAdjacentElement("afterend", filterEl); + } else { + editingElement.prepend(filterEl); + } + } + this.dependencies.builderActions.getAction("styleAction").apply({ + editingElement: filterEl, + param: { + mainParam: "background-color", + }, + value: value, + }); + }, + getValue: ({ editingElement }) => { + const filterEl = editingElement.querySelector(":scope > .o_we_bg_filter"); + if (!filterEl) { + return ""; + } + return this.dependencies.builderActions.getAction("styleAction").getValue({ + editingElement: filterEl, + param: { + mainParam: "background-color", + }, + }); + }, + }, + toggleBgImage: { + load: this.loadReplaceBackgroundImage.bind(this), + apply: this.applyReplaceBackgroundImage.bind(this), + isApplied: ({ editingElement }) => !!getBgImageURLFromEl(editingElement), + clean: ({ editingElement }) => { + editingElement.querySelector(".o_we_bg_filter")?.remove(); + this.applyReplaceBackgroundImage.bind(this)({ + editingElement: editingElement, + loadResult: "", + param: { forceClean: true }, + }); + this.dispatchTo("on_bg_image_hide_handlers", editingElement); + }, + }, + replaceBgImage: { + load: this.loadReplaceBackgroundImage.bind(this), + apply: this.applyReplaceBackgroundImage.bind(this), + }, + dynamicColor: { + getValue: ({ editingElement, param: { mainParam: colorName } }) => + getBackgroundImageColor(editingElement, colorName), + apply: ({ editingElement, param: { mainParam: colorName }, value }) => { + value = getValueFromVar(value); + const currentSrc = getBgImageURLFromEl(editingElement); + const newURL = new URL(currentSrc, window.location.origin); + newURL.searchParams.set(colorName, value); + const src = newURL.pathname + newURL.search; + this.setImageBackground(editingElement, src); + }, + }, + }; + } + /** + * Transfers the background-image and the dataset information relative to + * this image from the old editing element to the new one. + * @param {HTMLElement} oldEditingEl - The old editing element. + * @param {HTMLElement} newEditingEl - The new editing element. + */ + changeEditingEl(oldEditingEl, newEditingEl) { + // When we change the target of this option we need to transfer the + // background-image and the dataset information relative to this image + // from the old target to the new one. + const oldBgURL = getBgImageURLFromEl(oldEditingEl); + const isModifiedImage = oldEditingEl.classList.contains("o_modified_image_to_save"); + const filteredOldDataset = Object.entries(oldEditingEl.dataset).filter(([key]) => + isBackgroundImageAttribute(key) + ); + // Delete the dataset information relative to the background-image of + // the old target. + for (const [key] of filteredOldDataset) { + delete oldEditingEl.dataset[key]; + } + // It is important to delete ".o_modified_image_to_save" from the old + // target as its image source will be deleted. + oldEditingEl.classList.remove("o_modified_image_to_save"); + this.setImageBackground(oldEditingEl, ""); + // Apply the changes on the new editing element + if (oldBgURL) { + this.setImageBackground(newEditingEl, oldBgURL); + for (const [key, value] of filteredOldDataset) { + newEditingEl.dataset[key] = value; + } + newEditingEl.classList.toggle("o_modified_image_to_save", isModifiedImage); + } + } + loadReplaceBackgroundImage() { + return new Promise((resolve) => { + const onClose = this.dependencies.media.openMediaDialog({ + onlyImages: true, + save: (imageEl) => { + resolve(imageEl.getAttribute("src")); + }, + }); + onClose.then(resolve); + }); + } + applyReplaceBackgroundImage({ + editingElement, + loadResult: imageSrc, + param: { forceClean = false }, + }) { + if (!forceClean && !imageSrc) { + // Do nothing: no images has been selected on the media dialog + return; + } + this.setImageBackground(editingElement, imageSrc); + for (const attr of removeOnImageChangeAttrs) { + delete editingElement.dataset[attr]; + } + // TODO: call _autoOptimizeImage of the ImageHandlersOption + } + /** + * + * @param {HTMLElement} el + * @param {String} backgroundURL + */ + setImageBackground(el, backgroundURL) { + if (backgroundURL) { + el.classList.add("oe_img_bg", "o_bg_img_center"); + } else { + el.classList.remove("oe_img_bg", "o_bg_img_center", "o_modified_image_to_save"); + } + // TODO: check this comment + // We use selectStyle so that if when a background image is removed the + // remaining image matches the o_cc's gradient background, it can be + // removed too. + this.dependencies.coreBuilderAction.setStyle(el, "background-image-url", backgroundURL); + } +} + +registry + .category("website-plugins") + .add(BackgroundImageOptionPlugin.id, BackgroundImageOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/background_option/background_option.js b/addons/html_builder/static/src/plugins/background_option/background_option.js new file mode 100644 index 0000000000000..41432aafb2a2b --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_option.js @@ -0,0 +1,29 @@ +import { BaseOptionComponent } from "@html_builder/core/utils"; +import { BackgroundImageOption } from "./background_image_option"; +import { BackgroundPositionOption } from "./background_position_option"; +import { BackgroundShapeOption } from "./background_shape_option"; +import { useBackgroundOption } from "./background_hook"; + +export class BackgroundOption extends BaseOptionComponent { + static template = "html_builder.BackgroundOption"; + static components = { + BackgroundImageOption, + BackgroundPositionOption, + BackgroundShapeOption, + }; + static props = { + withColors: { type: Boolean }, + withImages: { type: Boolean }, + withColorCombinations: { type: Boolean }, + withShapes: { type: Boolean, optional: true }, + }; + static defaultProps = { + withShapes: false, + }; + + setup() { + super.setup(); + const { showColorFilter } = useBackgroundOption(this.isActiveItem); + this.showColorFilter = showColorFilter; + } +} diff --git a/addons/html_builder/static/src/plugins/background_option/background_option.xml b/addons/html_builder/static/src/plugins/background_option/background_option.xml new file mode 100644 index 0000000000000..a79e79fb77249 --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_option.xml @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/background_option/background_option_plugin.js b/addons/html_builder/static/src/plugins/background_option/background_option_plugin.js new file mode 100644 index 0000000000000..b514ba71107aa --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_option_plugin.js @@ -0,0 +1,25 @@ +import { applyFunDependOnSelectorAndExclude } from "@html_builder/plugins/utils"; +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; + +class BackgroundOptionPlugin extends Plugin { + static id = "backgroundOption"; + resources = { + normalize_handlers: this.normalize.bind(this), + system_classes: ["o_colored_level"], + }; + normalize(root) { + const markColorLevelSelectorParams = this.getResource("mark_color_level_selector_params"); + for (const markColorLevelSelectorParam of markColorLevelSelectorParams) { + applyFunDependOnSelectorAndExclude( + this.markColorLevel, + root, + markColorLevelSelectorParam + ); + } + } + markColorLevel(editingEl) { + editingEl.classList.add("o_colored_level"); + } +} +registry.category("website-plugins").add(BackgroundOptionPlugin.id, BackgroundOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/background_option/background_position_option.js b/addons/html_builder/static/src/plugins/background_option/background_position_option.js new file mode 100644 index 0000000000000..02e9006301ecc --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_position_option.js @@ -0,0 +1,6 @@ +import { BaseOptionComponent } from "@html_builder/core/utils"; + +export class BackgroundPositionOption extends BaseOptionComponent { + static template = "html_builder.BackgroundPositionOption"; + static props = {}; +} diff --git a/addons/html_builder/static/src/plugins/background_option/background_position_option.xml b/addons/html_builder/static/src/plugins/background_option/background_position_option.xml new file mode 100644 index 0000000000000..24348a0ec96b9 --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_position_option.xml @@ -0,0 +1,24 @@ + + + + + + + + Cover + Repeat pattern + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/background_option/background_position_option_plugin.js b/addons/html_builder/static/src/plugins/background_option/background_position_option_plugin.js new file mode 100644 index 0000000000000..be1bbbb8147e4 --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_position_option_plugin.js @@ -0,0 +1,113 @@ +import { getBgImageURLFromEl } from "@html_builder/utils/utils_css"; +import { Plugin } from "@html_editor/plugin"; +import { markup } from "@odoo/owl"; +import { registry } from "@web/core/registry"; +import { BackgroundPositionOverlay } from "./background_position_overlay"; + +const getBgSizeValue = function ({ editingElement, param: { mainParam: styleName } }) { + const backgroundSize = editingElement.style.backgroundSize; + const bgWidthAndHeight = backgroundSize.split(/\s+/g); + const value = styleName === "width" ? bgWidthAndHeight[0] : bgWidthAndHeight[1] || ""; + return value === "auto" ? "" : value; +}; + +class BackgroundPositionOptionPlugin extends Plugin { + static id = "backgroundPositionOption"; + static dependencies = ["overlay", "overlayButtons"]; + resources = { + builder_actions: this.getActions(), + }; + getActions() { + return { + backgroundType: { + apply: ({ editingElement, value }) => { + editingElement.classList.toggle( + "o_bg_img_opt_repeat", + value === "repeat-pattern" + ); + editingElement.style.setProperty("background-position", ""); + editingElement.style.setProperty( + "background-size", + value !== "repeat-pattern" ? "" : "100px" + ); + }, + isApplied: ({ editingElement, value }) => { + const hasElRepeatStyle = + getComputedStyle(editingElement).backgroundRepeat === "repeat"; + return value === "repeat-pattern" ? hasElRepeatStyle : !hasElRepeatStyle; + }, + }, + setBackgroundSize: { + getValue: getBgSizeValue, + apply: ({ editingElement, param: { mainParam: styleName }, value }) => { + const otherParam = styleName === "width" ? "height" : "width"; + let otherBgSize = getBgSizeValue({ + editingElement: editingElement, + param: { mainParam: otherParam }, + }); + let bgSize; + if (styleName === "width") { + value = !value && otherBgSize ? "auto" : value; + otherBgSize = otherBgSize === "" ? "" : ` ${otherBgSize}`; + bgSize = `${value}${otherBgSize}`; + } else { + otherBgSize ||= "auto"; + bgSize = `${otherBgSize} ${value}`; + } + editingElement.style.setProperty("background-size", bgSize); + }, + }, + backgroundPositionOverlay: { + load: async ({ editingElement }) => { + let imgEl; + await new Promise((resolve) => { + imgEl = document.createElement("img"); + imgEl.addEventListener("load", () => resolve()); + imgEl.src = getBgImageURLFromEl(editingElement); + }); + const copyEl = editingElement.cloneNode(false); + copyEl.classList.remove("o_editable"); + // Hide the builder overlay buttons when the user changes + // the background position. + return new Promise((resolve) => { + this.dependencies.overlayButtons.hideOverlayButtonsUi(); + let appliedBgPosition = ""; + const onRemove = () => { + this.dependencies.overlayButtons.showOverlayButtonsUi(); + resolve(appliedBgPosition); + }; + const overlay = this.dependencies.overlay.createOverlay( + BackgroundPositionOverlay, + { positionOptions: { position: "over-fit", flip: false } }, + { onRemove: onRemove } + ); + const applyPosition = (bgPosition) => { + appliedBgPosition = bgPosition; + overlay.close(); + }; + overlay.open({ + target: editingElement, + props: { + outerHtmlEditingElement: markup(copyEl.outerHTML), + editingElement: editingElement, + mockEditingElOnImg: imgEl, + applyPosition: applyPosition, + discardPosition: () => overlay.close(), + editable: this.editable, + }, + }); + }); + }, + apply: ({ editingElement, loadResult: bgPosition }) => { + if (bgPosition) { + editingElement.style.backgroundPosition = bgPosition; + } + }, + }, + }; + } +} + +registry + .category("website-plugins") + .add(BackgroundPositionOptionPlugin.id, BackgroundPositionOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/background_option/background_position_overlay.js b/addons/html_builder/static/src/plugins/background_option/background_position_overlay.js new file mode 100644 index 0000000000000..618a11705f22a --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_position_overlay.js @@ -0,0 +1,183 @@ +import { scrollTo } from "@html_builder/utils/scrolling"; +import { Component, onMounted, onWillStart, onWillUnmount, useEffect, useRef } from "@odoo/owl"; + +export class BackgroundPositionOverlay extends Component { + static template = "html_builder.BackgroundPositionOverlay"; + static props = { + outerHtmlEditingElement: { type: String }, + editingElement: { validate: (p) => p.nodeType === Node.ELEMENT_NODE }, + mockEditingElOnImg: { validate: (p) => p.tagName === "IMG" }, + applyPosition: { type: Function }, + discardPosition: { type: Function }, + editable: { validate: (p) => p.nodeType === Node.ELEMENT_NODE }, + }; + setup() { + this.parentBgDragger = useRef("parentBgDragger"); + this.backgroundOverlay = useRef("backgroundOverlay"); + this.overlayContent = useRef("overlayContent"); + // This has been put here as it is used in an event listener. As we need + // to remove the event listener and the method needs to access the + // `BgPositionOverlay` instance, it has to be an array function. + this.dimensionOverlay = () => { + // Sets the overlay in the right place so that the draggable + // background sizes the background item like the editing element. + this.backgroundOverlay.el.style.width = `${this.props.editable.clientWidth}px`; + this.backgroundOverlay.el.style.height = `${this.props.editable.clientHeight}px`; + const overlayContentEl = this.overlayContent.el; + + this.bgDraggerEl.style.width = `${this.props.editingElement.clientWidth}px`; + this.bgDraggerEl.style.height = `${this.props.editingElement.clientHeight}px`; + + const topPos = Math.max( + 0, + window.scrollY - + (this.props.editingElement.getBoundingClientRect().top + window.scrollY) + ); + overlayContentEl.querySelector(".o_we_overlay_buttons").style.top = `${topPos}px`; + }; + onWillStart(async () => { + const position = getComputedStyle(this.props.editingElement) + .backgroundPosition.split(" ") + .map((v) => parseInt(v)); + const delta = this.getBackgroundDelta(); + // originalPosition kept in % for when movement in one direction + // doesn't make sense. + this.originalPosition = { left: position[0], top: position[1] }; + // Convert % values to pixels for current position because + // mouse movement is in pixels. + this.currentPosition = { + left: (position[0] / 100) * delta.x || 0, + top: (position[1] / 100) * delta.y || 0, + }; + // Make sure the editing element is visible + // TODO: check; the overlay could fail to be visible if the editing + // element is too big. + const rect = this.props.editingElement.getBoundingClientRect(); + const isEditingElEntirelyVisible = + rect.top >= 0 && + rect.bottom <= this.props.editingElement.ownerDocument.defaultView.innerHeight; + if (!isEditingElEntirelyVisible) { + await scrollTo(this.props.editingElement, { extraOffset: 50 }); + } + }); + onMounted(() => { + this.bgDraggerEl = this.parentBgDragger.el.children[0]; + this.dimensionOverlay(); + this.bgDraggerEl.style.backgroundAttachment = getComputedStyle( + this.props.editingElement + ).backgroundAttachment; + window.addEventListener("resize", this.dimensionOverlay); + }); + useEffect(() => { + this.tooltip = window.Tooltip.getOrCreateInstance(this.parentBgDragger.el, { + trigger: "manual", + container: this.backgroundOverlay.el, + }); + this.tooltip.show(); + }); + onWillUnmount(() => { + window.removeEventListener("resize", this.dimensionOverlay); + this.tooltip.dispose(); + }); + } + apply() { + this.props.applyPosition(getComputedStyle(this.bgDraggerEl).backgroundPosition); + } + onDragBackgroundStart(ev) { + this.bgDraggerEl.classList.add("o_we_grabbing"); + const documentEl = window.document; + const onDragBackgroundMove = this.onDragBackgroundMove.bind(this); + documentEl.addEventListener("mousemove", onDragBackgroundMove); + documentEl.addEventListener( + "mouseup", + () => { + this.bgDraggerEl.classList.remove("o_we_grabbing"); + documentEl.removeEventListener("mousemove", onDragBackgroundMove); + }, + { once: true } + ); + } + /** + * Drags the overlay's background image. + * + */ + onDragBackgroundMove(ev) { + ev.preventDefault(); + + const delta = this.getBackgroundDelta(); + this.currentPosition.left = clamp(this.currentPosition.left + ev.movementX, [0, delta.x]); + this.currentPosition.top = clamp(this.currentPosition.top + ev.movementY, [0, delta.y]); + + const percentPosition = { + left: (this.currentPosition.left / delta.x) * 100, + top: (this.currentPosition.top / delta.y) * 100, + }; + // In cover mode, one delta will be 0 and dividing by it will yield + // Infinity. Defaulting to originalPosition in that case (can't be + // dragged). + percentPosition.left = isFinite(percentPosition.left) + ? percentPosition.left + : this.originalPosition.left; + percentPosition.top = isFinite(percentPosition.top) + ? percentPosition.top + : this.originalPosition.top; + + this.bgDraggerEl.style.backgroundPosition = `${percentPosition.left}% ${percentPosition.top}%`; + + function clamp(val, bounds) { + // We sort the bounds because when one dimension of the rendered + // background is larger than the container, delta is negative, and + // we want to use it as lower bound. + bounds = bounds.sort(); + return Math.max(bounds[0], Math.min(val, bounds[1])); + } + } + /** + * Returns the difference between the editing element's size and the + * background's rendered size. Background position values in % are a + * percentage of this. + * + */ + getBackgroundDelta() { + const bgSize = getComputedStyle(this.props.editingElement).backgroundSize; + const editingElDimension = this.props.editingElement.getBoundingClientRect(); + if (bgSize !== "cover") { + let [width, height] = bgSize.split(" "); + if (width === "auto" && (height === "auto" || !height)) { + return { + x: editingElDimension.width - this.props.mockEditingElOnImg.naturalWidth, + y: editingElDimension.height - this.props.mockEditingElOnImg.naturalHeight, + }; + } + // At least one of width or height is not auto, so we can use it to + // calculate the other if it's not set. + [width, height] = [parseInt(width), parseInt(height)]; + return { + x: + editingElDimension.width - + (width || + (height * this.props.mockEditingElOnImg.naturalWidth) / + this.props.mockEditingElOnImg.naturalHeight), + y: + editingElDimension.height - + (height || + (width * this.props.mockEditingElOnImg.naturalHeight) / + this.props.mockEditingElOnImg.naturalWidth), + }; + } + + const renderRatio = Math.max( + editingElDimension.width / this.props.mockEditingElOnImg.naturalWidth, + editingElDimension.height / this.props.mockEditingElOnImg.naturalHeight + ); + + return { + x: + editingElDimension.width - + Math.round(renderRatio * this.props.mockEditingElOnImg.naturalWidth), + y: + editingElDimension.height - + Math.round(renderRatio * this.props.mockEditingElOnImg.naturalHeight), + }; + } +} diff --git a/addons/html_builder/static/src/plugins/background_option/background_position_overlay.scss b/addons/html_builder/static/src/plugins/background_option/background_position_overlay.scss new file mode 100644 index 0000000000000..3f7bdf3ce937e --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_position_overlay.scss @@ -0,0 +1,35 @@ +.o_we_background_position_overlay { + background-color: rgba(0,0,0,.7); + pointer-events: auto; + display: block; + z-index: 1; + + .o_we_overlay_content { + @include o-grab-cursor; + + .o_we_grabbing { + cursor: grabbing; + } + } + + .o_we_overlay_buttons { + .btn-primary { + @include button-variant($o-brand-primary, $o-brand-primary); + } + .btn-secondary { + @include button-variant($o-we-color-danger, $o-we-color-danger); + } + } + + .o_overlay_background > * { + display: block !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + transform: none !important; + max-width: unset !important; + max-height: unset !important; + z-index: 0 !important; + } +} diff --git a/addons/html_builder/static/src/plugins/background_option/background_position_overlay.xml b/addons/html_builder/static/src/plugins/background_option/background_position_overlay.xml new file mode 100644 index 0000000000000..a24555b3bb35b --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_position_overlay.xml @@ -0,0 +1,21 @@ + + + + +
+
+
+ +
+
+ + +
+
+
+ + + diff --git a/addons/html_builder/static/src/plugins/background_option/background_shape_option.js b/addons/html_builder/static/src/plugins/background_option/background_shape_option.js new file mode 100644 index 0000000000000..3df048df9486b --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_shape_option.js @@ -0,0 +1,55 @@ +import { BaseOptionComponent, useDomState } from "@html_builder/core/utils"; +import { toRatio } from "@html_builder/utils/utils"; +import { getBgImageURLFromEl } from "@html_builder/utils/utils_css"; +import { _t } from "@web/core/l10n/translation"; + +export class BackgroundShapeOption extends BaseOptionComponent { + static template = "html_builder.BackgroundShapeOption"; + static props = {}; + setup() { + super.setup(); + this.backgroundShapePlugin = this.env.editor.shared.backgroundShapeOption; + this.toRatio = toRatio; + this.state = useDomState((editingElement) => { + const shapeData = this.backgroundShapePlugin.getShapeData(editingElement); + const shapeInfo = this.backgroundShapePlugin.getBackgroundShapes()[shapeData.shape]; + return { + currentShapeLabel: "Choose a shape", + shapeName: shapeInfo?.selectLabel || _t("None"), + isAnimated: shapeInfo?.animated, + }; + }); + } + showBackgroundShapes() { + this.backgroundShapePlugin.showBackgroundShapes(this.env.getEditingElements()); + } + getDefaultColorNames() { + const editingEl = this.env.getEditingElement(); + return Object.keys(getDefaultColors(editingEl)); + } +} + +/** + * Returns the default colors for the currently selected shape. + * + * @param {HTMLElement} editingElement the element on which to read the + * shape data. + */ +export function getDefaultColors(editingElement) { + const shapeContainerEl = editingElement.querySelector(":scope > .o_we_shape"); + if (!shapeContainerEl) { + return {}; + } + const shapeContainerClonedEl = shapeContainerEl.cloneNode(true); + shapeContainerClonedEl.classList.add("d-none"); + // Needs to be in document for bg-image class to take effect + editingElement.ownerDocument.body.appendChild(shapeContainerClonedEl); + shapeContainerClonedEl.style.setProperty("background-image", ""); + const shapeSrc = shapeContainerClonedEl && getBgImageURLFromEl(shapeContainerClonedEl); + shapeContainerClonedEl.remove(); + if (!shapeSrc) { + return {}; + } + const url = new URL(shapeSrc, window.location.origin); + return Object.fromEntries(url.searchParams.entries()); +} diff --git a/addons/html_builder/static/src/plugins/background_option/background_shape_option.xml b/addons/html_builder/static/src/plugins/background_option/background_shape_option.xml new file mode 100644 index 0000000000000..5f228e51f1eb3 --- /dev/null +++ b/addons/html_builder/static/src/plugins/background_option/background_shape_option.xml @@ -0,0 +1,41 @@ + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/carousel_option_plugin.js b/addons/html_builder/static/src/plugins/carousel_option_plugin.js new file mode 100644 index 0000000000000..2cbbb4abca819 --- /dev/null +++ b/addons/html_builder/static/src/plugins/carousel_option_plugin.js @@ -0,0 +1,353 @@ +import { Plugin } from "@html_editor/plugin"; +import { _t } from "@web/core/l10n/translation"; +import { registry } from "@web/core/registry"; +import { CarouselItemHeaderMiddleButtons } from "./carousel_item_header_buttons"; +import { renderToElement } from "@web/core/utils/render"; + +export class CarouselOptionPlugin extends Plugin { + static id = "carouselOption"; + static dependencies = ["clone", "history", "remove", "builder-options"]; + static shared = ["slide", "addSlide", "removeSlide"]; + + resources = { + builder_options: [ + { + template: "html_builder.CarouselOption", + selector: "section", + exclude: ".s_carousel_intro_wrapper, .s_carousel_cards_wrapper", + applyTo: ":scope > .carousel", + }, + { + template: "html_builder.CarouselBottomControllersOption", + selector: "section", + applyTo: ".s_carousel_intro", + }, + { + template: "html_builder.CarouselCardsOption", + selector: "section", + applyTo: ".s_carousel_cards", + }, + ], + builder_header_middle_buttons: { + Component: CarouselItemHeaderMiddleButtons, + selector: + ".s_carousel .carousel-item, .s_quotes_carousel .carousel-item, .s_carousel_intro .carousel-item, .s_carousel_cards .carousel-item", + props: { + slideCarousel: (direction, editingElement) => + this.slideCarousel(editingElement.closest(".carousel"), direction), + addSlide: (editingElement) => this.addSlide(editingElement.closest(".carousel")), + removeSlide: (editingElement) => + this.removeSlide(editingElement.closest(".carousel")), + }, + }, + container_title: { + selector: + ".s_carousel .carousel-item, .s_quotes_carousel .carousel-item, .s_carousel_intro .carousel-item, .s_carousel_cards .carousel-item", + getTitleExtraInfo: (editingElement) => this.getTitleExtraInfo(editingElement), + }, + builder_actions: this.getActions(), + on_cloned_handlers: this.onCloned.bind(this), + on_will_clone_handlers: this.onWillClone.bind(this), + on_snippet_dropped_handlers: this.onSnippetDropped.bind(this), + normalize_handlers: this.normalize.bind(this), + on_reorder_items_handlers: this.reorderCarouselItems.bind(this), + }; + + getActions() { + return { + addSlide: { + preview: false, + apply: async ({ editingElement }) => this.addSlide(editingElement), + }, + slideCarousel: { + preview: false, + apply: async ({ editingElement, direction: direction }) => + this.slideCarousel(editingElement, direction), + }, + toggleControllers: { + apply: ({ editingElement }) => { + const carouselEl = editingElement.closest(".carousel"); + const indicatorsWrapEl = carouselEl.querySelector(".carousel-indicators"); + const areControllersHidden = + carouselEl.classList.contains("s_carousel_arrows_hidden") && + indicatorsWrapEl.classList.contains("s_carousel_indicators_hidden"); + carouselEl.classList.toggle( + "s_carousel_controllers_hidden", + areControllersHidden + ); + }, + }, + toggleCardImg: { + apply: ({ editingElement }) => this.toggleCardImg(editingElement), + clean: ({ editingElement: el }) => { + const carouselEl = el.closest(".carousel"); + carouselEl.querySelectorAll("figure").forEach((el) => el.remove()); + }, + isApplied: ({ editingElement }) => { + const carouselEl = editingElement.closest(".carousel"); + const cardImgEl = carouselEl.querySelector(".o_card_img_wrapper"); + return !!cardImgEl; + }, + }, + }; + } + + toggleCardImg(editingElement) { + const carouselEl = editingElement.closest(".carousel"); + const cardEls = carouselEl.querySelectorAll(".card"); + for (const cardEl of cardEls) { + const imageWrapperEl = renderToElement("html_builder.s_carousel_cards.imageWrapper"); + cardEl.insertAdjacentElement("afterbegin", imageWrapperEl); + } + } + + getTitleExtraInfo(editingElement) { + const itemsEls = [...editingElement.parentElement.children]; + const activeIndex = itemsEls.indexOf(editingElement); + + const updatedText = ` (${activeIndex + 1}/${itemsEls.length})`; + return updatedText; + } + + async addSlide(editingElement) { + const activeCarouselItem = editingElement.querySelector(".carousel-item.active"); + this.dependencies.clone.cloneElement(activeCarouselItem); + + await this.slide(editingElement, "next"); + this.dependencies.history.addStep(); + this.dependencies["builder-options"].updateContainers( + editingElement.querySelector(".carousel-item.active") + ); + } + + async removeSlide(editingCarouselElement) { + const toRemoveCarouselItemEl = + editingCarouselElement.querySelector(".carousel-item.active"); + const toRemoveIndicatorEl = editingCarouselElement.querySelector( + ".carousel-indicators > .active" + ); + const itemsEls = [...editingCarouselElement.querySelectorAll(".carousel-item")]; + + if (itemsEls.length > 1) { + // Slide to the previous item + await this.slide(editingCarouselElement, "prev"); + + // Remove the carousel item and the indicator + this.dependencies.remove.removeElement(toRemoveCarouselItemEl); + this.dependencies.remove.removeElement(toRemoveIndicatorEl); + + this.dependencies.history.addStep(); + this.dependencies["builder-options"].updateContainers( + editingCarouselElement.querySelector(".carousel-item.active") + ); + } + } + + async slideCarousel(editingElement, direction) { + await this.slide(editingElement, direction); + this.dependencies.history.addStep(); + this.dependencies["builder-options"].updateContainers( + editingElement.querySelector(".carousel-item.active") + ); + } + + /** + * Slides the carousel in the given direction. + * + * @param {String|Number} direction the direction in which to slide: + * - "prev": the previous slide; + * - "next": the next slide; + * - number: a slide number. + * @param {Element} editingElement the carousel element. + * @returns {Promise} + */ + slide(editingElement, direction) { + editingElement.addEventListener("slide.bs.carousel", () => { + this.slideTimestamp = window.performance.now(); + }); + + return new Promise((resolve) => { + editingElement.addEventListener("slid.bs.carousel", () => { + // slid.bs.carousel is most of the time fired too soon by bootstrap + // since it emulates the transitionEnd with a setTimeout. We wait + // here an extra 20% of the time before retargeting edition, which + // should be enough... + const slideDuration = window.performance.now() - this.slideTimestamp; + setTimeout(() => { + // Setting the active indicator manually, as Bootstrap could + // not do it because the `data-bs-slide-to` attribute is not + // here in edit mode anymore. + const activeSlide = editingElement.querySelector(".carousel-item.active"); + const indicatorsEl = editingElement.querySelector(".carousel-indicators"); + const activeIndex = [...activeSlide.parentElement.children].indexOf( + activeSlide + ); + const activeIndicatorEl = [...indicatorsEl.children][activeIndex]; + activeIndicatorEl.classList.add("active"); + activeIndicatorEl.setAttribute("aria-current", "true"); + + resolve(); + }, 0.2 * slideDuration); + }); + + const carouselInstance = window.Carousel.getOrCreateInstance(editingElement, { + ride: false, + pause: true, + }); + if (typeof direction === "number") { + carouselInstance.to(direction); + } else { + carouselInstance[direction](); + } + }); + } + + onWillClone({ originalEl }) { + if (originalEl.matches(".carousel-item")) { + const editingCarousel = originalEl.closest(".carousel"); + + const indicatorsEl = editingCarousel.querySelector(".carousel-indicators"); + this.controlEls = editingCarousel.querySelectorAll( + ".carousel-control-prev, .carousel-control-next, .carousel-indicators" + ); + this.controlEls.forEach((control) => { + control.classList.remove("d-none"); + }); + + const newIndicatorEl = this.document.createElement("button"); + newIndicatorEl.setAttribute("data-bs-target", "#" + editingCarousel.id); + newIndicatorEl.setAttribute("aria-label", _t("Carousel indicator")); + indicatorsEl.appendChild(newIndicatorEl); + } + } + + onCloned({ cloneEl }) { + if ( + cloneEl.matches( + ".s_carousel_wrapper, .s_carousel_intro_wrapper, .s_carousel_cards_wrapper" + ) + ) { + this.assignUniqueID(cloneEl); + } + if (cloneEl.matches(".carousel-item")) { + // Need to remove editor data from the clone so it gets its own. + cloneEl.classList.remove("active"); + } + } + + onSnippetDropped({ snippetEl }) { + if ( + snippetEl.matches( + ".s_carousel_wrapper, .s_carousel_intro_wrapper, .s_carousel_cards_wrapper" + ) + ) { + this.assignUniqueID(snippetEl); + } + } + + assignUniqueID(editingElement) { + const id = "myCarousel" + Date.now(); + editingElement.querySelector(".carousel").setAttribute("id", id); + editingElement.querySelectorAll("[data-bs-target]").forEach((el) => { + el.setAttribute("data-bs-target", "#" + id); + }); + editingElement.querySelectorAll("[data-bs-slide], [data-bs-slide-to]").forEach((el) => { + if (el.hasAttribute("data-bs-target")) { + el.setAttribute("data-bs-target", "#" + id); + } else if (el.hasAttribute("href")) { + el.setAttribute("href", "#" + id); + } + }); + } + normalize(root) { + const carousel = root.closest(".carousel"); + const allCarousels = [...root.querySelectorAll(".carousel")]; + if (carousel) { + allCarousels.push(carousel); + } + this.fixWrongHistoryOnCarousels(allCarousels); + } + /** + * This fix is exists to workaround a bug: + * - add slide + * - undo + * - redo + * => the active class of the carousel item and therefore it looks like the carrousel is empty. + * + * @todo: find the root cause and remove this fix. + */ + fixWrongHistoryOnCarousels(carousels) { + for (const carousel of carousels) { + const carouselItems = carousel.querySelectorAll(".carousel-item"); + const activeCarouselItems = carousel.querySelectorAll(".carousel-item.active"); + if (!activeCarouselItems.length) { + carouselItems[0].classList.add("active"); + const indicatorsEl = carousel.querySelector(".carousel-indicators"); + const activeIndicatorEl = [...indicatorsEl.children][0]; + activeIndicatorEl.classList.add("active"); + activeIndicatorEl.setAttribute("aria-current", "true"); + } + } + } + + reorderCarouselItems({ elementToReorder, position, optionName }) { + if (optionName === "Carousel") { + const editingCarouselElement = elementToReorder.closest(".carousel"); + const itemsEls = [...editingCarouselElement.querySelectorAll(".carousel-item")]; + + // reorder carousel items + const oldPosition = itemsEls.indexOf(elementToReorder); + if (oldPosition === 0 && position === "prev") { + position = "last"; + } else if (oldPosition === itemsEls.length - 1 && position === "next") { + position = "first"; + } + itemsEls.splice(oldPosition, 1); + switch (position) { + case "first": + itemsEls.unshift(elementToReorder); + break; + case "prev": + itemsEls.splice(Math.max(oldPosition - 1, 0), 0, elementToReorder); + break; + case "next": + itemsEls.splice(oldPosition + 1, 0, elementToReorder); + break; + case "last": + itemsEls.push(elementToReorder); + break; + } + + // replace the carousel-inner element by one with reordered carousel items + const carouselInnerEl = editingCarouselElement.querySelector(".carousel-inner"); + const newCarouselInnerEl = document.createElement("div"); + newCarouselInnerEl.classList.add("carousel-inner"); + newCarouselInnerEl.append(...itemsEls); + carouselInnerEl.replaceWith(newCarouselInnerEl); + + // slide to the reordered target carousel item and update indicators + const newItemPosition = itemsEls.indexOf(elementToReorder); + editingCarouselElement.classList.remove("slide"); + const carouselInstance = window.Carousel.getOrCreateInstance(editingCarouselElement, { + ride: false, + pause: true, + }); + carouselInstance.to(newItemPosition); + const indicatorEls = editingCarouselElement.querySelectorAll( + ".carousel-indicators > *" + ); + indicatorEls.forEach((indicatorEl, i) => { + indicatorEl.classList.toggle("active", i === newItemPosition); + }); + editingCarouselElement.classList.add("slide"); + // Prevent the carousel from automatically sliding afterwards. + carouselInstance["pause"](); + + const activeImageEl = editingCarouselElement.querySelector(".carousel-item.active img"); + this.dependencies.history.addStep(); + this.dependencies["builder-options"].updateContainers(activeImageEl); + } + } +} + +registry.category("website-plugins").add(CarouselOptionPlugin.id, CarouselOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/content_width_option.inside.scss b/addons/html_builder/static/src/plugins/content_width_option.inside.scss new file mode 100644 index 0000000000000..a7cf085659b61 --- /dev/null +++ b/addons/html_builder/static/src/plugins/content_width_option.inside.scss @@ -0,0 +1,4 @@ +// CONTAINER PREVIEW +.o_container_preview { + outline: 2px dashed $o-we-handles-accent-color; +} diff --git a/addons/html_builder/static/src/plugins/content_width_option.xml b/addons/html_builder/static/src/plugins/content_width_option.xml new file mode 100644 index 0000000000000..9e8ce3ee7d162 --- /dev/null +++ b/addons/html_builder/static/src/plugins/content_width_option.xml @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/content_width_option_plugin.js b/addons/html_builder/static/src/plugins/content_width_option_plugin.js new file mode 100644 index 0000000000000..00fdd54720a78 --- /dev/null +++ b/addons/html_builder/static/src/plugins/content_width_option_plugin.js @@ -0,0 +1,43 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { withSequence } from "@html_editor/utils/resource"; +import { CONTAINER_WIDTH } from "@html_builder/website_builder/option_sequence"; + +class ContentWidthOptionPlugin extends Plugin { + static id = "contentWidthOption"; + static dependencies = ["builderActions", "history"]; + resources = { + builder_options: [ + withSequence(CONTAINER_WIDTH, { + template: "html_builder.ContentWidthOption", + selector: "section, .s_carousel .carousel-item, .s_carousel_intro_item", + exclude: + "[data-snippet] :not(.oe_structure) > [data-snippet],#footer > *,#o_wblog_post_content *", + applyTo: + ":scope > .container, :scope > .container-fluid, :scope > .o_container_small", + }), + ], + builder_actions: this.getActions(), + }; + + getActions() { + const builderActions = this.dependencies.builderActions; + const historyPlugin = this.dependencies.history; + return { + get setContainerWidth() { + const classAction = builderActions.getAction("classAction"); + return { + ...classAction, + apply: (...args) => { + classAction.apply(...args); + // Add/remove the container preview. + const containerEl = args[0].editingElement; + const isPreviewMode = historyPlugin.getIsPreviewing(); + containerEl.classList.toggle("o_container_preview", isPreviewMode); + }, + }; + }, + }; + } +} +registry.category("website-plugins").add(ContentWidthOptionPlugin.id, ContentWidthOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/countdown_option.inside.scss b/addons/html_builder/static/src/plugins/countdown_option.inside.scss new file mode 100644 index 0000000000000..3f5cecb6daa94 --- /dev/null +++ b/addons/html_builder/static/src/plugins/countdown_option.inside.scss @@ -0,0 +1,12 @@ +// s_countdown preview classes +.o_editable .s_countdown { + &.s_countdown_enable_preview { + &.hide-countdown .s_countdown_canvas_wrapper { + display: none !important; + } + + .s_countdown_end_message { + display: initial !important; + } + } +} diff --git a/addons/html_builder/static/src/plugins/countdown_option.xml b/addons/html_builder/static/src/plugins/countdown_option.xml new file mode 100644 index 0000000000000..5132fd4806935 --- /dev/null +++ b/addons/html_builder/static/src/plugins/countdown_option.xml @@ -0,0 +1,112 @@ + + + + + + + + + + + Nothing + Redirect + Show Message and hide countdown + Show Message and keep countdown + + + + + + + + + Small + Medium + Large + + + + + D + D - H - M + D - H - M - S + + + + + + + + + + Circle + Boxes + Clean + Text Inline + + + + + + Inner + Plain + None + + + + + + + + + Surrounded + Disappearing + None + + + + + + + Thin + Thick + + + + + + + + + + + +
+
+
+
+

Happy Odoo Anniversary!

+

As promised, we will offer 4 free tickets to our next summit.
Visit our Facebook page to know if you are one of the lucky winners.

+
+
+
+ Countdown is over - Firework +
+
+
+
+
+
+
+ + + diff --git a/addons/html_builder/static/src/plugins/countdown_option_plugin.js b/addons/html_builder/static/src/plugins/countdown_option_plugin.js new file mode 100644 index 0000000000000..8c82472098210 --- /dev/null +++ b/addons/html_builder/static/src/plugins/countdown_option_plugin.js @@ -0,0 +1,123 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { registry } from "@web/core/registry"; +import { renderToElement } from "@web/core/utils/render"; + +class CountdownOptionPlugin extends Plugin { + static id = "CountdownOption"; + resources = { + builder_options: [ + withSequence(50, { + template: "html_builder.CountdownOption", + selector: ".s_countdown", + cleanForSave: this.cleanForSave.bind(this), + }), + ], + so_content_addition_selector: [".s_countdown"], + builder_actions: { + // TODO AGAU: update after merging generalized restart interactions + // remove this and xml BuilderContext + reloadCountdown: { + apply: ({ editingElement }) => { + this.dispatchTo("update_interactions", editingElement); + }, + }, + setEndAction: { + apply: this.setEndAction.bind(this), + isApplied: this.isEndActionApplied.bind(this), + }, + previewEndMessage: { + apply: ({ editingElement }) => this.toggleEndMessagePreview(editingElement, true), + clean: ({ editingElement }) => this.toggleEndMessagePreview(editingElement, false), + isApplied: this.isEndMessagePreviewed.bind(this), + }, + setLayout: { + apply: this.setLayout.bind(this), + isApplied: this.isLayoutApplied.bind(this), + }, + }, + }; + + /** + * Used to preserve modified end messages through end action changes. This + * allows the user to test options without losing their progress while in + * between saves. + * + * @type {WeakMap} + */ + editingElEndMessages = new WeakMap(); + + cleanForSave(editingEl) { + editingEl.classList.remove("s_countdown_enable_preview"); + } + + setEndAction({ editingElement, value }) { + editingElement.dataset.endAction = value; + const endMessageEl = editingElement.querySelector(".s_countdown_end_message"); + + // Only hide countdown in one case + editingElement.classList.toggle("hide-countdown", value === "message_no_countdown"); + + // Only have redirect url attribute in one case + if (value === "redirect") { + editingElement.dataset.redirectUrl = ""; + } else { + delete editingElement.dataset.redirectUrl; + } + + if (value === "message" || value === "message_no_countdown") { + if (!endMessageEl) { + const existingEndMessage = this.editingElEndMessages.get(editingElement); + editingElement.appendChild( + existingEndMessage || + renderToElement("html_builder.website.s_countdown.end_message") + ); + } + } else { + endMessageEl?.remove(); + this.editingElEndMessages.set(editingElement, endMessageEl); + // Reset end message preview to avoid countdown staying hidden + this.toggleEndMessagePreview(editingElement, false); + } + } + + isEndActionApplied({ editingElement, value }) { + return editingElement.dataset.endAction === value; + } + + setLayout({ editingElement, value }) { + switch (value) { + case "circle": + editingElement.dataset.progressBarStyle = "disappear"; + editingElement.dataset.progressBarWeight = "thin"; + editingElement.dataset.layoutBackground = "none"; + break; + case "boxes": + editingElement.dataset.progressBarStyle = "none"; + editingElement.dataset.layoutBackground = "plain"; + break; + case "clean": + editingElement.dataset.progressBarStyle = "none"; + editingElement.dataset.layoutBackground = "none"; + break; + case "text": + editingElement.dataset.progressBarStyle = "none"; + editingElement.dataset.layoutBackground = "none"; + break; + } + editingElement.dataset.layout = value; + } + + isLayoutApplied({ editingElement, value }) { + return editingElement.dataset.layout === value; + } + + isEndMessagePreviewed({ editingElement }) { + return !!editingElement?.classList.contains("s_countdown_enable_preview"); + } + + toggleEndMessagePreview(editingElement, doShow) { + editingElement?.classList.toggle("s_countdown_enable_preview", doShow === true); + } +} +registry.category("website-plugins").add(CountdownOptionPlugin.id, CountdownOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/dynamic_svg_option.js b/addons/html_builder/static/src/plugins/dynamic_svg_option.js new file mode 100644 index 0000000000000..aa444673cbbab --- /dev/null +++ b/addons/html_builder/static/src/plugins/dynamic_svg_option.js @@ -0,0 +1,23 @@ +import { BaseOptionComponent, useDomState } from "@html_builder/core/utils"; + +export class DynamicSvgOption extends BaseOptionComponent { + static template = "html_builder.DynamicSvgOption"; + static props = {}; + + setup() { + super.setup(); + this.domState = useDomState((imgEl) => { + const colors = {}; + const searchParams = new URL(imgEl.src, window.location.origin).searchParams; + for (const colorName of ["c1", "c2", "c3", "c4", "c5"]) { + const color = searchParams.get(colorName); + if (color) { + colors[colorName] = color; + } + } + return { + colors: colors, + }; + }); + } +} diff --git a/addons/html_builder/static/src/plugins/dynamic_svg_option.xml b/addons/html_builder/static/src/plugins/dynamic_svg_option.xml new file mode 100644 index 0000000000000..e77741046865c --- /dev/null +++ b/addons/html_builder/static/src/plugins/dynamic_svg_option.xml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/dynamic_svg_option_plugin.js b/addons/html_builder/static/src/plugins/dynamic_svg_option_plugin.js new file mode 100644 index 0000000000000..df45648b41bbc --- /dev/null +++ b/addons/html_builder/static/src/plugins/dynamic_svg_option_plugin.js @@ -0,0 +1,53 @@ +import { registry } from "@web/core/registry"; +import { Plugin } from "@html_editor/plugin"; +import { DynamicSvgOption } from "./dynamic_svg_option"; +import { normalizeCSSColor } from "@web/core/utils/colors"; +import { loadImage } from "@html_editor/utils/image_processing"; +import { withSequence } from "@html_editor/utils/resource"; +import { DYNAMIC_SVG } from "@html_builder/utils/option_sequence"; + +class DynamicSvgOptionPlugin extends Plugin { + static id = "DynamicSvgOption"; + resources = { + builder_options: [ + withSequence(DYNAMIC_SVG, { + OptionComponent: DynamicSvgOption, + props: {}, + selector: "img[src^='/html_editor/shape/'], img[src^='/web_editor/shape/']", + }), + ], + builder_actions: this.getActions(), + }; + + getActions() { + return { + svgColor: { + getValue: ({ editingElement: imgEl, param: { mainParam: colorName } }) => { + const searchParams = new URL(imgEl.src, window.location.origin).searchParams; + return searchParams.get(colorName); + }, + load: async ({ + editingElement: imgEl, + param: { mainParam: colorName }, + value: color, + }) => { + const newURL = new URL(imgEl.src, window.location.origin); + newURL.searchParams.set(colorName, normalizeCSSColor(color)); + const src = newURL.pathname + newURL.search; + await loadImage(src); + return src; + }, + apply: ({ + editingElement: imgEl, + param: { mainParam: colorName }, + value: color, + loadResult: newSrc, + }) => { + imgEl.setAttribute("src", newSrc); + }, + }, + }; + } +} + +registry.category("website-plugins").add(DynamicSvgOptionPlugin.id, DynamicSvgOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/font_awesome_option.xml b/addons/html_builder/static/src/plugins/font_awesome_option.xml new file mode 100644 index 0000000000000..6854d3483f8b0 --- /dev/null +++ b/addons/html_builder/static/src/plugins/font_awesome_option.xml @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + 1x + 2x + 3x + 4x + 5x + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/font_awesome_option_plugin.js b/addons/html_builder/static/src/plugins/font_awesome_option_plugin.js new file mode 100644 index 0000000000000..ed4a0332ab26e --- /dev/null +++ b/addons/html_builder/static/src/plugins/font_awesome_option_plugin.js @@ -0,0 +1,32 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { classAction } from "../core/core_builder_action_plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { FONT_AWESOME } from "@html_builder/utils/option_sequence"; + +class FontAwesomeOptionPlugin extends Plugin { + static id = "fontAwesomeOptionPlugin"; + resources = { + builder_options: [ + withSequence(FONT_AWESOME, { + template: "html_builder.FontAwesomeOption", + selector: "span.fa, i.fa", + exclude: "[data-oe-xpath]", + }), + ], + builder_actions: this.getActions(), + }; + + getActions() { + return { + faResize: { + ...classAction, + apply: function ({ editingElement }) { + editingElement.classList.remove("fa-1x", "fa-lg"); + classAction.apply(...arguments); + }, + }, + }; + } +} +registry.category("website-plugins").add(FontAwesomeOptionPlugin.id, FontAwesomeOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/image/image_grid_option.js b/addons/html_builder/static/src/plugins/image/image_grid_option.js new file mode 100644 index 0000000000000..b1333792feadf --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_grid_option.js @@ -0,0 +1,29 @@ +import { BaseOptionComponent, useDomState } from "@html_builder/core/utils"; + +export class ImageGridOption extends BaseOptionComponent { + static template = "html_builder.ImageGridOption"; + static props = {}; + + setup() { + super.setup(); + this.state = useDomState((editingElement) => { + const imageGridItemEl = editingElement.closest(".o_grid_item_image"); + return { + isOptionActive: this.isOptionActive(editingElement, imageGridItemEl), + }; + }); + } + + isOptionActive(editingElement, imageGridItemEl) { + // Special conditions for the hover effects. + const hasSquareShape = editingElement.dataset.shape === "web_editor/geometric/geo_square"; + const effectAllowsOption = !["dolly_zoom", "outline", "image_mirror_blur"].includes( + editingElement.dataset.hoverEffect + ); + + return ( + !!imageGridItemEl && + (!("shape" in editingElement.dataset) || (hasSquareShape && effectAllowsOption)) + ); + } +} diff --git a/addons/html_builder/static/src/plugins/image/image_grid_option.xml b/addons/html_builder/static/src/plugins/image/image_grid_option.xml new file mode 100644 index 0000000000000..1678955b0b06f --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_grid_option.xml @@ -0,0 +1,13 @@ + + + + + + + Contain + Cover + + + + + diff --git a/addons/html_builder/static/src/plugins/image/image_grid_option_plugin.js b/addons/html_builder/static/src/plugins/image/image_grid_option_plugin.js new file mode 100644 index 0000000000000..31d69903e9cf9 --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_grid_option_plugin.js @@ -0,0 +1,44 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { ImageGridOption } from "./image_grid_option"; +import { withSequence } from "@html_editor/utils/resource"; +import { GRID_IMAGE } from "@html_builder/website_builder/option_sequence"; + +class ImageGridOptionPlugin extends Plugin { + static id = "imageGridOption"; + + resources = { + builder_options: [ + withSequence(GRID_IMAGE, { + OptionComponent: ImageGridOption, + selector: "img", + }), + ], + builder_actions: this.getActions(), + }; + + getActions() { + return { + setGridImageMode: { + isApplied: ({ editingElement, value: modeName }) => { + const imageGridItemEl = editingElement.closest(".o_grid_item_image"); + const withContain = imageGridItemEl.classList.contains( + "o_grid_item_image_contain" + ); + + return withContain ? modeName === "contain" : modeName === "cover"; + }, + apply: ({ editingElement, value: modeName }) => { + const imageGridItemEl = editingElement.closest(".o_grid_item_image"); + if (modeName === "contain") { + imageGridItemEl.classList.add("o_grid_item_image_contain"); + } else if (modeName === "cover") { + imageGridItemEl.classList.remove("o_grid_item_image_contain"); + } + }, + }, + }; + } +} + +registry.category("website-plugins").add(ImageGridOptionPlugin.id, ImageGridOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/image/image_helpers.js b/addons/html_builder/static/src/plugins/image/image_helpers.js new file mode 100644 index 0000000000000..9286945acf4f3 --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_helpers.js @@ -0,0 +1,6 @@ +export function getShapeURL(shapeName) { + const [module, directory, fileName] = shapeName.split("/"); + return `/${encodeURIComponent(module)}/static/image_shapes/${encodeURIComponent( + directory + )}/${encodeURIComponent(fileName)}.svg`; +} diff --git a/addons/html_builder/static/src/plugins/image/image_optimize_plugin.js b/addons/html_builder/static/src/plugins/image/image_optimize_plugin.js new file mode 100644 index 0000000000000..32043c8a0f14b --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_optimize_plugin.js @@ -0,0 +1,88 @@ +import { + DEFAULT_IMAGE_QUALITY, + shouldPreventGifTransformation, +} from "@html_editor/main/media/image_post_process_plugin"; +import { Plugin } from "@html_editor/plugin"; +import { loadImage } from "@html_editor/utils/image_processing"; +import { _t } from "@web/core/l10n/translation"; +import { registry } from "@web/core/registry"; + +class ImageOptimizePlugin extends Plugin { + static id = "imageOptimize"; + static dependencies = ["imagePostProcess"]; + static shared = ["computeAvailableFormats"]; + resources = { + builder_actions: this.getActions(), + }; + getActions() { + return { + setImageFormat: { + isApplied: ({ editingElement, param: { width, mimetype } }) => + editingElement.dataset.resizeWidth === String(width) && + editingElement.dataset.formatMimetype === mimetype, + load: async ({ editingElement: img, param: { width, mimetype } }) => + this.dependencies.imagePostProcess.processImage(img, { + resizeWidth: width, + formatMimetype: mimetype, + }), + apply: ({ loadResult: updateImageAttributes }) => { + updateImageAttributes(); + }, + }, + setImageQuality: { + getValue: ({ editingElement: img }) => + ("quality" in img.dataset && img.dataset.quality) || DEFAULT_IMAGE_QUALITY, + load: async ({ editingElement: img, value: quality }) => + this.dependencies.imagePostProcess.processImage(img, { + quality, + }), + apply: ({ loadResult: updateImageAttributes }) => { + updateImageAttributes(); + }, + }, + }; + } + /** + * Returns a list of valid formats for a given image or an empty list if + * there is no mimetypeBeforeConversion data attribute on the image. + * + * @private + */ + async computeAvailableFormats(img, computeMaxDisplayWidth) { + if (!img.dataset.mimetypeBeforeConversion || shouldPreventGifTransformation(img)) { + return []; + } + + const maxWidth = await this.getImageWidth(img); + const optimizedWidth = Math.min(maxWidth, computeMaxDisplayWidth?.(img) || 0); + const widths = { + 128: ["128px", "image/webp"], + 256: ["256px", "image/webp"], + 512: ["512px", "image/webp"], + 1024: ["1024px", "image/webp"], + 1920: ["1920px", "image/webp"], + }; + widths[img.naturalWidth] = [_t("%spx", img.naturalWidth), "image/webp"]; + widths[optimizedWidth] = [_t("%spx (Suggested)", optimizedWidth), "image/webp"]; + const mimetypeBeforeConversion = img.dataset.mimetypeBeforeConversion; + widths[maxWidth] = [_t("%spx (Original)", maxWidth), mimetypeBeforeConversion]; + if (mimetypeBeforeConversion !== "image/webp") { + // Avoid a key collision by subtracting 0.1 - putting the webp + // above the original format one of the same size. + widths[maxWidth - 0.1] = [_t("%spx", maxWidth), "image/webp"]; + } + return Object.entries(widths) + .filter(([width]) => width <= maxWidth) + .sort(([v1], [v2]) => v1 - v2) + .map(([width, [label, mimetype]]) => { + const id = `${width}-${mimetype}`; + return { id, width: Math.round(width), label, mimetype }; + }); + } + async getImageWidth(img) { + const getNaturalWidth = () => + loadImage(img.dataset.originalSrc).then((i) => i.naturalWidth); + return img.dataset.width ? Math.round(img.dataset.width) : await getNaturalWidth(); + } +} +registry.category("website-plugins").add(ImageOptimizePlugin.id, ImageOptimizePlugin); diff --git a/addons/html_builder/static/src/plugins/image/image_shape_option.js b/addons/html_builder/static/src/plugins/image/image_shape_option.js new file mode 100644 index 0000000000000..6afb146f83d49 --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_shape_option.js @@ -0,0 +1,51 @@ +import { BaseOptionComponent, useDomState } from "@html_builder/core/utils"; +import { toRatio } from "@html_builder/utils/utils"; +import { ShapeSelector } from "../shape/shape_selector"; + +export class ImageShapeOption extends BaseOptionComponent { + static template = "html_builder.ImageShapeOption"; + static props = {}; + setup() { + super.setup(); + this.customizeTabPlugin = this.env.editor.shared.customizeTab; + this.imageShapeOption = this.env.editor.shared.imageShapeOption; + this.toRatio = toRatio; + this.state = useDomState((editingElement) => ({ + hasShape: !!editingElement.dataset.shape, + shapeLabel: this.imageShapeOption.getShapeLabel(editingElement.dataset.shape), + showImageShape0: this.isShapeVisible(editingElement, 0), + showImageShape1: this.isShapeVisible(editingElement, 1), + showImageShape2: this.isShapeVisible(editingElement, 2), + showImageShape3: this.isShapeVisible(editingElement, 3), + showImageShape4: this.isShapeVisible(editingElement, 4), + showImageShapeTransform: this.imageShapeOption.isTransformableShape( + editingElement.dataset.shape + ), + showImageShapeAnimation: this.imageShapeOption.isAnimableShape( + editingElement.dataset.shape + ), + togglableRatio: this.imageShapeOption.isTogglableRatioShape( + editingElement.dataset.shape + ), + })); + } + isShapeVisible(img, shapeIndex) { + const shapeName = img.dataset.shape; + const shapeColors = img.dataset.shapeColors; + if (!shapeName || !shapeColors) { + return false; + } + const colors = img.dataset.shapeColors.split(";"); + return colors[shapeIndex]; + } + showImageShapes() { + this.customizeTabPlugin.openCustomizeComponent( + ShapeSelector, + this.env.getEditingElements(), + { + shapeActionId: "setImageShape", + shapeGroups: this.imageShapeOption.getImageShapeGroups(), + } + ); + } +} diff --git a/addons/html_builder/static/src/plugins/image/image_shape_option.xml b/addons/html_builder/static/src/plugins/image/image_shape_option.xml new file mode 100644 index 0000000000000..f48237583098a --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_shape_option.xml @@ -0,0 +1,45 @@ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/image/image_shape_option_plugin.js b/addons/html_builder/static/src/plugins/image/image_shape_option_plugin.js new file mode 100644 index 0000000000000..b28800c34405d --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_shape_option_plugin.js @@ -0,0 +1,443 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { DEFAULT_PALETTE } from "@html_editor/utils/color"; +import { isCSSColor } from "@web/core/utils/colors"; +import { getCSSVariableValue } from "@html_builder/utils/utils_css"; +import { getShapeURL } from "./image_helpers"; +import { activateCropper, createDataURL, loadImage } from "@html_editor/utils/image_processing"; +import { getValueFromVar } from "@html_builder/utils/utils"; +import { imageShapeDefinitions } from "./image_shapes_definition"; +import { + getImageTransformationData, + shouldPreventGifTransformation, +} from "@html_editor/main/media/image_post_process_plugin"; +import { _t } from "@web/core/l10n/translation"; + +// Regex definitions to apply speed modification in SVG files +// Note : These regex patterns are duplicated on the server side for +// background images that are part of a CSS rule "background-image: ...". The +// client-side regex patterns are used for images that are part of an +// "src" attribute with a base64 encoded svg in the tag. Perhaps we should +// consider finding a solution to define them only once? The issue is that the +// regex patterns in Python are slightly different from those in JavaScript. +// See : controllers/main.py +const CSS_ANIMATION_RULE_REGEX = + /(?animation(?:-duration)?: .*?)(?(?:\d+(?:\.\d+)?)|(?:\.\d+))(?ms|s)(?\s|;|"|$)/gm; +const SVG_DUR_TIMECOUNT_VAL_REGEX = + /(?\sdur="\s*)(?(?:\d+(?:\.\d+)?)|(?:\.\d+))(?h|min|ms|s)?\s*"/gm; +const CSS_ANIMATION_RATIO_REGEX = /(--animation_ratio: (?\d*(\.\d+)?));/m; + +class ImageShapeOptionPlugin extends Plugin { + static id = "imageShapeOption"; + static dependencies = ["history", "userCommand", "imagePostProcess"]; + static shared = [ + "getImageShapeGroups", + "isTransformableShape", + "isAnimableShape", + "isTogglableRatioShape", + "getShapeLabel", + ]; + resources = { + builder_actions: this.getActions(), + process_image_warmup_handlers: this.processImageWarmup.bind(this), + process_image_post_handlers: this.processImagePost.bind(this), + }; + setup() { + this.shapeSvgTextCache = {}; + this.imageShapes = this.makeImageShapes(); + } + getActions() { + return { + setImageShape: { + load: async ({ editingElement: img, value: shapeId }) => { + const params = { shape: shapeId }; + // todo nby: re-read the old option method `setImgShape` and be sure all the logic is in there + return this.loadShape(img, params); + }, + apply: ({ editingElement: img, loadResult: updateImageAttributes }) => { + updateImageAttributes(); + const imgFilename = img.dataset.originalSrc.split("/").pop().split(".")[0]; + img.dataset.fileName = `${imgFilename}.svg`; + }, + }, + setImgShapeColor: { + getValue: ({ editingElement: img, param: { index: colorIndex } }) => + img.dataset.shapeColors?.split(";")[colorIndex] || "", + load: async ({ + editingElement: img, + param: { index: colorIndex }, + value: color, + }) => { + color = getValueFromVar(color); + const newColorId = parseInt(colorIndex); + const oldColors = img.dataset.shapeColors.split(";"); + const newColors = oldColors.slice(0); + newColors[newColorId] = this.getCSSColorValue( + color === "" ? `o-color-${newColorId + 1}` : color + ); + return this.loadShape(img, { shapeColors: newColors.join(";") }); + }, + apply: ({ loadResult: updateImageAttributes }) => { + updateImageAttributes(); + }, + }, + flipImageShape: { + load: async ({ editingElement: img, param: { axis } }) => { + const currentAxis = img.dataset.shapeFlip || ""; + const newAxis = currentAxis.includes(axis) + ? currentAxis.replace(axis, "") + : currentAxis + axis; + return this.loadShape(img, { shapeFlip: newAxis === "yx" ? "xy" : newAxis }); + }, + apply: ({ loadResult: updateImageAttributes }) => { + updateImageAttributes(); + }, + }, + rotateImageShape: { + load: async ({ editingElement: img, param: { side } }) => { + const currentRotateValue = parseInt(img.dataset.shapeRotate) || 0; + const rotation = side === "left" ? -90 : 90; + const newRotateValue = (currentRotateValue + rotation + 360) % 360; + return this.loadShape(img, { shapeRotate: newRotateValue }); + }, + apply: ({ loadResult: updateImageAttributes }) => { + updateImageAttributes(); + }, + }, + setImageShapeSpeed: { + getValue: ({ editingElement: img }) => img.dataset.shapeAnimationSpeed || 0, + load: async ({ editingElement: img, value: speed }) => + this.loadShape(img, { + shapeAnimationSpeed: speed, + }), + apply: ({ loadResult: updateImageAttributes }) => { + updateImageAttributes(); + }, + }, + toggleImageShapeRatio: { + isApplied: ({ editingElement: img }) => img.dataset.aspectRatio !== "1/1", + load: async ({ editingElement: img }) => { + const isStretched = img.dataset.aspectRatio !== "1/1"; + return this.loadShape(img, { + aspectRatio: isStretched ? "1/1" : "0/0", + x: undefined, + y: undefined, + width: undefined, + height: undefined, + }); + }, + apply: ({ editingElement: img, loadResult: updateImageAttributes }) => { + updateImageAttributes(); + }, + }, + }; + } + async getShapeSvgText(shapeName) { + let shapeSvgText = this.shapeSvgTextCache[shapeName]; + if (shapeSvgText) { + return shapeSvgText; + } + const shapeURL = getShapeURL(shapeName); + shapeSvgText = await (await fetch(shapeURL)).text(); + this.shapeSvgTextCache[shapeName] = shapeSvgText; + return shapeSvgText; + } + async loadShape(img, newData = {}) { + return this.dependencies.imagePostProcess.processImage(img, newData); + //todo: handle hover effect before + // todo: is it still needed? + // await loadImage(shapeDataURL, img); + // return { + // ...newData, + // shapeColors: newColors.join(";"), + // shapeDataURL, + // }; + //todo: handle hover effect after + // todo: find a way to apply to carousel thumbnail + } + async processImageWarmup(img, newDataset) { + const getData = (propName) => + propName in newDataset ? newDataset[propName] : img.dataset[propName]; + const shapeId = getData("shape"); + // todo: should we reset some data if shapeName is not defined? + if (!shapeId) { + return; + } + const isNewShape = "shape" in newDataset && newDataset.shape !== img.dataset.shape; + const shapeSvgText = await this.getShapeSvgText(shapeId); + + // Get colors. + const defaultShapeColors = this.getThemedSvgColors(shapeSvgText).join(";"); + newDataset.shapeColors = + newDataset.shapeColors ?? + (isNewShape ? defaultShapeColors : img.dataset.shapeColors ?? defaultShapeColors); + + const getNaturalWidth = async () => { + if (img.naturalWidth) { + return img.naturalWidth; + } + await new Promise((resolve, reject) => { + img.addEventListener("load", () => resolve(img), { once: true }); + img.addEventListener("error", reject, { once: true }); + }); + return img.naturalWidth; + }; + const svgWidth = getData("resizeWidth") || getData("width") || (await getNaturalWidth()); + + // Get the svg element. + const svg = this.computeShape(shapeSvgText, { + shapeId, + shapeFlip: getData("shapeFlip") || "", + shapeRotate: getData("shapeRotate") || 0, + shapeAnimationSpeed: Number(getData("shapeAnimationSpeed")) || 0, + shapeColors: newDataset.shapeColors, + }); + + const svgAspectRatio = + parseInt(svg.getAttribute("width")) / parseInt(svg.getAttribute("height")); + const imgAspectRatio = svg.dataset.imgAspectRatio; + + if (isNewShape && !("aspectRatio" in newDataset)) { + const data = getImageTransformationData({ ...img.dataset, ...newDataset }); + + // The togglable ratio is squared by default. + const shouldBeSquared = + this.imageShapes[shapeId].togglableRatio && !img.dataset.aspectRatio; + if (shouldBeSquared && !shouldPreventGifTransformation(data)) { + newDataset.aspectRatio = "1/1"; + } + } + + /** + * @param {HTMLCanvasElement} canvas + * @param {Object} data dataset containing the cropperDataFields + */ + const postProcessCroppedCanvas = async (canvas) => { + const img = await loadImage(canvas.toDataURL()); + document.createElement("div").appendChild(img); + const cropper = await activateCropper(img, 1, { y: 0 }); + const croppedCanvas = cropper.getCroppedCanvas(); + cropper.destroy(); + return croppedCanvas; + }; + + return { + getHeight: svg.dataset.imgPerspective && ((canvas) => canvas.width / svgAspectRatio), + perspective: svg.dataset.imgPerspective || null, + newDataset, + // If imgAspectRatio is defined, the image is cropped a second time + // after the first crop to ensure that the ratio of the shape and the + // image are the same. + postProcessCroppedCanvas: imgAspectRatio && postProcessCroppedCanvas, + + svg, + svgAspectRatio, + svgWidth, + }; + } + async processImagePost(b64url, handlerDataset, processContext) { + const { svg, svgAspectRatio, svgWidth } = processContext; + if (!svg) { + return; + } + svg.querySelectorAll("image").forEach((image) => { + image.setAttribute("xlink:href", b64url); + }); + // Force natural width & height (note: loading the original image is + // needed for Safari where natural width & height of SVG does not return + // the correct values). + const loadedImage = await loadImage(b64url); + // If the svg forces the size of the shape we still want to have the resized + // width + if (!svg.dataset.forcedSize) { + svg.setAttribute("width", loadedImage.naturalWidth); + svg.setAttribute("height", loadedImage.naturalHeight); + } else { + const imageWidth = Math.trunc(svgWidth); + const newHeight = imageWidth / svgAspectRatio; + svg.setAttribute("width", imageWidth); + svg.setAttribute("height", newHeight); + } + + // Transform the current SVG in a base64 file to be saved by the server + const blob = new Blob([svg.outerHTML], { + type: "image/svg+xml", + }); + const dataURL = await createDataURL(blob); + return [dataURL, { ...handlerDataset, computedMimetype: "image/svg+xml" }]; + } + + /** + * Sets the image in the supplied SVG and replace the src with a dataURL + * + * @param {string} svgText svg text file + * @param {HTMLImageElement} img + * @returns {SVGElement} + */ + computeShape(svgText, { shapeId, shapeFlip, shapeRotate, shapeAnimationSpeed, shapeColors }) { + // Apply the colors to the shape. + svgText = this.replaceSvgColors(svgText, shapeColors.split(";")); + // Apply the right animation speed if there is an animated shape. + if (shapeAnimationSpeed) { + svgText = this.replaceAnimationDuration(svgText, shapeAnimationSpeed); + } + + const svg = new DOMParser().parseFromString(svgText, "image/svg+xml").documentElement; + + // Modifies the SVG according to the "flip" or/and "rotate" options. + if ((shapeFlip || shapeRotate) && this.isTransformableShape(shapeId)) { + const shapeTransformValues = []; + if (shapeFlip) { + // Possible values => "x", "y", "xy" + shapeTransformValues.push( + `scale${shapeFlip === "x" ? "X" : shapeFlip === "y" ? "Y" : ""}(-1)` + ); + } + if (shapeRotate) { + // Possible values => "90", "180", "270" + shapeTransformValues.push(`rotate(${shapeRotate}deg)`); + } + // "transform-origin: center;" does not work on "#filterPath". But + // since its dimension is 1px * 1px the following solution works. + const transformOrigin = "transform-origin: 0.5px 0.5px;"; + // Applies the transformation values to the path used to create a + // mask over the SVG image. + svg.querySelector("#filterPath").setAttribute( + "style", + `transform: ${shapeTransformValues.join(" ")}; ${transformOrigin}` + ); + } + + // todo: Add shape animations on hover. + // if (params.hoverEffect && this._canHaveHoverEffect()) { + // this._addImageShapeHoverEffect(svg, img); + // } + + svg.removeChild(svg.querySelector("#preview")); + return svg; + } + /** + * Replace animation durations in SVG and CSS with modified values. + * + * This function takes a ratio and an SVG string containing animations. It + * uses regular expressions to find and replace the duration values in both + * CSS animation rules and SVG duration attributes based on the provided + * ratio. + * + * @param {string} svgText The SVG string containing animations. + * @param {number} speed The speed used to calculate the new animation + * durations. If speed is 0.0, the original + * durations are preserved. + * @returns {string} The modified SVG string with updated animation + * durations. + */ + replaceAnimationDuration(svgText, speed) { + const ratio = (speed >= 0.0 ? 1.0 + speed : 1.0 / (1.0 - speed)).toFixed(3); + // Callback for CSS 'animation' and 'animation-duration' declarations + function callbackCssAnimationRule(match, declaration, value, unit, separator) { + value = parseFloat(value) / (ratio ? ratio : 1); + return `${declaration}${value}${unit}${separator}`; + } + + // Callback function for handling the 'dur' SVG attribute timecount + // value in accordance with the SMIL animation specification (e.g., 4s, + // 2ms). If no unit is provided, seconds are implied. + function callbackSvgDurTimecountVal(match, attribute_name, value, unit) { + value = parseFloat(value) / (ratio ? ratio : 1); + return `${attribute_name}${value}${unit ? unit : "s"}"`; + } + + // Applying regex substitutions to modify animation speed in the 'svg' + // variable. + svgText = svgText.replace(CSS_ANIMATION_RULE_REGEX, callbackCssAnimationRule); + svgText = svgText.replace(SVG_DUR_TIMECOUNT_VAL_REGEX, callbackSvgDurTimecountVal); + if (CSS_ANIMATION_RATIO_REGEX.test(svgText)) { + // Replace the CSS --animation_ratio variable for future purpose. + svgText = svgText.replace(CSS_ANIMATION_RATIO_REGEX, `--animation_ratio: ${ratio};`); + } else { + // Add the style tag with the root variable --animation ratio for + // future purpose. + const regex = //m; + const subst = `$&\n\t`; + svgText = svgText.replace(regex, subst); + } + return svgText; + } + + replaceSvgColors(shapeSvgText, colors) { + const svgColors = this.getSvgColors(shapeSvgText); + for (const [i, color] of colors.entries()) { + shapeSvgText = shapeSvgText.replace( + new RegExp(svgColors[i], "g"), + this.getCSSColorValue(color) + ); + } + return shapeSvgText; + } + getSvgColors(shapeSvgText) { + // Map the default palette colors to an array if the shape includes them + // If they do not map a NULL, this way we know if a default color is in + // the shape + return Object.values(DEFAULT_PALETTE).map((color) => + shapeSvgText.includes(color) ? color : null + ); + } + getThemedSvgColors(shapeSvgText) { + const svgColors = this.getSvgColors(shapeSvgText); + return svgColors.map((color, i) => + color !== null ? this.getCSSColorValue(`o-color-${i + 1}`) : null + ); + } + applyShapeColors(editingElement, newColors) {} + /** + * Gets the CSS value of a color variable name so it can be used on shapes. + * + * @param {string} color + * @returns {string} + */ + getCSSColorValue(color) { + if (!color || isCSSColor(color)) { + return color; + } + return getCSSVariableValue(color); + } + isTransformableShape(shapeId) { + if (!shapeId) { + return false; + } + const canTransform = this.imageShapes[shapeId].transform; + return typeof canTransform === "undefined" ? true : canTransform; + } + getShapeLabel(shapeId) { + if (!shapeId) { + return _t("None"); + } + return this.imageShapes[shapeId].selectLabel || _t("None"); + } + isAnimableShape(shape) { + if (!shape) { + return false; + } + return this.imageShapes[shape].animated; + } + isTogglableRatioShape(shape) { + if (!shape) { + return false; + } + return this.imageShapes[shape].togglableRatio; + } + getImageShapeGroups() { + return imageShapeDefinitions; + } + makeImageShapes() { + const entries = Object.values(this.getImageShapeGroups()) + .map((x) => + Object.values(x.subgroups) + .map((x) => Object.entries(x.shapes)) + .flat() + ) + .flat(); + return Object.fromEntries(entries); + } +} +registry.category("website-plugins").add(ImageShapeOptionPlugin.id, ImageShapeOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/image/image_shapes_definition.js b/addons/html_builder/static/src/plugins/image/image_shapes_definition.js new file mode 100644 index 0000000000000..73ee3dccc1678 --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_shapes_definition.js @@ -0,0 +1,692 @@ +import { _t } from "@web/core/l10n/translation"; + +export const imageShapeDefinitions = { + basic: { + label: "Basic", + subgroups: { + geometrics: { + label: "Geometrics", + shapes: { + // todo: find it's proper place when implementing + // hovering an image without shape. + // "html_builder/geometric/geo_square": { + // transform: false, + // }, + "html_builder/geometric/geo_shuriken": { + selectLabel: _t("Shuriken"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric/geo_diamond": { + selectLabel: _t("Diamond"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric/geo_triangle": { + selectLabel: _t("Triangle"), + togglableRatio: true, + }, + "html_builder/geometric/geo_cornered_triangle": { + selectLabel: _t("Corner Triangle"), + togglableRatio: true, + }, + "html_builder/geometric/geo_pentagon": { + selectLabel: _t("Pentagon"), + togglableRatio: true, + }, + "html_builder/geometric/geo_hexagon": { + selectLabel: _t("Hexagon"), + togglableRatio: true, + }, + "html_builder/geometric/geo_heptagon": { + selectLabel: _t("Heptagon"), + togglableRatio: true, + }, + "html_builder/geometric/geo_star": { + selectLabel: _t("Star 1"), + togglableRatio: true, + }, + "html_builder/geometric/geo_star_8pin": { + selectLabel: _t("Star 2"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric/geo_star_16pin": { + selectLabel: _t("Star 3"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric/geo_slanted": { + selectLabel: _t("Slanted"), + togglableRatio: true, + }, + "html_builder/geometric/geo_emerald": { + selectLabel: _t("Emerald"), + togglableRatio: true, + }, + "html_builder/geometric/geo_tetris": { + selectLabel: _t("Tetris"), + togglableRatio: true, + }, + "html_builder/geometric/geo_kayak": { + selectLabel: _t("Kayak"), + togglableRatio: true, + }, + "html_builder/geometric/geo_tear": { + selectLabel: _t("Tear"), + togglableRatio: true, + }, + "html_builder/geometric/geo_gem": { + selectLabel: _t("Gem"), + togglableRatio: true, + }, + "html_builder/geometric/geo_sonar": { + selectLabel: _t("Sonar"), + togglableRatio: true, + }, + "html_builder/geometric/geo_door": { + selectLabel: _t("Door"), + togglableRatio: true, + }, + "html_builder/geometric/geo_square_1": { + selectLabel: _t("Square 1"), + animated: true, + }, + "html_builder/geometric/geo_square_2": { + selectLabel: _t("Square 2"), + animated: true, + }, + "html_builder/geometric/geo_square_3": { + selectLabel: _t("Square 3"), + animated: true, + }, + "html_builder/geometric/geo_square_4": { + selectLabel: _t("Square 4"), + animated: true, + }, + "html_builder/geometric/geo_square_5": { + selectLabel: _t("Square 5"), + animated: true, + }, + "html_builder/geometric/geo_square_6": { + selectLabel: _t("Square 6"), + animated: true, + }, + }, + }, + geometrics_rounded: { + label: "Geometrics Rounded", + shapes: { + "html_builder/geometric_round/geo_round_circle": { + selectLabel: _t("Circle"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_square": { + selectLabel: _t("Square (R)"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_diamond": { + selectLabel: _t("Diamond (R)"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_shuriken": { + selectLabel: _t("Shuriken (R)"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_triangle": { + selectLabel: _t("Triangle (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_pentagon": { + selectLabel: _t("Pentagon (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_hexagon": { + selectLabel: _t("Hexagon (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_heptagon": { + selectLabel: _t("Heptagon (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_star": { + selectLabel: _t("Star 1 (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_star_7pin": { + selectLabel: _t("Star 2 (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_star_8pin": { + selectLabel: _t("Star 3 (R)"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_star_16pin": { + selectLabel: _t("Star 4 (R)"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_emerald": { + selectLabel: _t("Emerald (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_lemon": { + selectLabel: _t("Lemon (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_tear": { + selectLabel: _t("Tear (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_pill": { + selectLabel: _t("Pill (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_gem": { + selectLabel: _t("Gem (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_cornered": { + selectLabel: _t("Cornered"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_door": { + selectLabel: _t("Door (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_sonar": { + selectLabel: _t("Sonar (R)"), + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_clover": { + selectLabel: _t("Clover (R)"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_bread": { + selectLabel: _t("Bread (R)"), + transform: false, + togglableRatio: true, + }, + "html_builder/geometric_round/geo_round_square_1": { + selectLabel: _t("Square 1 (R)"), + animated: true, + }, + "html_builder/geometric_round/geo_round_square_2": { + selectLabel: _t("Square 2 (R)"), + animated: true, + }, + "html_builder/geometric_round/geo_round_blob_soft": { + selectLabel: _t("Blob Soft"), + animated: true, + }, + "html_builder/geometric_round/geo_round_blob_medium": { + selectLabel: _t("Blob Medium"), + animated: true, + }, + "html_builder/geometric_round/geo_round_blob_hard": { + selectLabel: _t("Blob Hard"), + animated: true, + }, + }, + }, + geometric_panels: { + label: "Geometrics Panels", + shapes: { + "html_builder/panel/panel_duo": { + selectLabel: _t("Duo"), + }, + "html_builder/panel/panel_duo_r": { + selectLabel: _t("Duo (R)"), + }, + "html_builder/panel/panel_duo_step": { + selectLabel: _t("Duo Step"), + }, + "html_builder/panel/panel_duo_step_pill": { + selectLabel: _t("Duo Step Pill"), + }, + "html_builder/panel/panel_trio_in_r": { + selectLabel: _t("Trio In (R)"), + }, + "html_builder/panel/panel_trio_out_r": { + selectLabel: _t("Trio Out (R)"), + }, + "html_builder/panel/panel_window": { + selectLabel: _t("Window"), + transform: false, + togglableRatio: true, + }, + }, + }, + composites: { + label: "Composites", + shapes: { + "html_builder/composite/composite_double_pill": { + selectLabel: _t("Double Pill"), + }, + "html_builder/composite/composite_triple_pill": { + selectLabel: _t("Triple Pill"), + }, + "html_builder/composite/composite_half_circle": { + selectLabel: _t("Half Circle"), + }, + "html_builder/composite/composite_sonar": { + selectLabel: _t("Double Sonar"), + }, + "html_builder/composite/composite_cut_circle": { + selectLabel: _t("Cut Circle"), + }, + }, + }, + }, + }, + decorative: { + label: "Decorative", + subgroups: { + brushed: { + label: "Brushed", + shapes: { + "html_builder/brushed/brush_1": { + selectLabel: _t("Brush 1"), + togglableRatio: true, + }, + "html_builder/brushed/brush_2": { + selectLabel: _t("Brush 2"), + togglableRatio: true, + }, + "html_builder/brushed/brush_3": { + selectLabel: _t("Brush 3"), + togglableRatio: true, + }, + "html_builder/brushed/brush_4": { + selectLabel: _t("Brush 4"), + }, + }, + }, + composition: { + label: "Composition", + shapes: { + "html_builder/composition/composition_organic_line": { + selectLabel: _t("Organic Line"), + transform: false, + }, + "html_builder/composition/composition_oval_line": { + selectLabel: _t("Oval Line"), + transform: false, + }, + "html_builder/composition/composition_triangle_line": { + selectLabel: _t("Triangle Line"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_line_1": { + selectLabel: _t("Line 1"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_line_3": { + selectLabel: _t("Line 2"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_line_2": { + selectLabel: _t("Line 2"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_mixed_1": { + selectLabel: _t("Mixed 1"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_mixed_2": { + selectLabel: _t("Mixed 2"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_planet_1": { + selectLabel: _t("Planet 1"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_planet_2": { + selectLabel: _t("Planet 2"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_square_1": { + selectLabel: _t("Square Dot 1"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_square_2": { + selectLabel: _t("Square Dot 2"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_square_3": { + selectLabel: _t("Square Dot 3"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_square_4": { + selectLabel: _t("Square Dot 4"), + animated: true, + transform: false, + }, + "html_builder/composition/composition_square_line": { + selectLabel: _t("Square Line"), + animated: true, + transform: false, + }, + }, + }, + patterns: { + label: "Patterns", + shapes: { + "html_builder/pattern/pattern_organic_cross": { + selectLabel: _t("Organic Cross"), + transform: false, + }, + "html_builder/pattern/pattern_organic_caps": { + selectLabel: _t("Organic Caps"), + transform: false, + }, + "html_builder/pattern/pattern_oval_zebra": { + selectLabel: _t("Oval Zebra"), + transform: false, + }, + "html_builder/pattern/pattern_wave_1": { + selectLabel: _t("Wave 1"), + animated: true, + transform: false, + }, + "html_builder/pattern/pattern_line_star": { + selectLabel: _t("Star"), + animated: true, + transform: false, + }, + "html_builder/pattern/pattern_line_sun": { + selectLabel: _t("Sun"), + animated: true, + transform: false, + }, + "html_builder/pattern/pattern_wave_2": { + selectLabel: _t("Wave 2"), + animated: true, + transform: false, + }, + "html_builder/pattern/pattern_wave_3": { + selectLabel: _t("Wave 3"), + animated: true, + transform: false, + }, + "html_builder/pattern/pattern_point": { + selectLabel: _t("Point"), + animated: true, + transform: false, + }, + "html_builder/pattern/pattern_organic_dot": { + selectLabel: _t("Organic Dot"), + animated: true, + transform: false, + }, + "html_builder/pattern/pattern_labyrinth": { + selectLabel: _t("Labyrinth"), + animated: true, + transform: false, + }, + "html_builder/pattern/pattern_circuit": { + selectLabel: _t("Circuit"), + animated: true, + transform: false, + }, + "html_builder/pattern/pattern_wave_4": { + selectLabel: _t("Wave 4"), + animated: true, + transform: false, + }, + }, + }, + solids: { + label: "Solids", + shapes: { + "html_builder/solid/solid_blob_1": { + selectLabel: _t("Blob 1"), + transform: false, + }, + "html_builder/solid/solid_blob_2": { + selectLabel: _t("Blob 2"), + transform: false, + }, + "html_builder/solid/solid_blob_3": { + selectLabel: _t("Blob 3"), + transform: false, + }, + "html_builder/solid/solid_blob_4": { + selectLabel: _t("Blob 4"), + }, + "html_builder/solid/solid_blob_5": { + selectLabel: _t("Blob 5"), + transform: false, + }, + "html_builder/solid/solid_blob_shadow_1": { + selectLabel: _t("Blob Shadow 1"), + transform: false, + anmated: true, + }, + "html_builder/solid/solid_blob_shadow_2": { + selectLabel: _t("Blob Shadow 2"), + transform: false, + anmated: true, + }, + "html_builder/solid/solid_square_1": { + selectLabel: _t("Square 1"), + transform: false, + anmated: true, + }, + "html_builder/solid/solid_square_2": { + selectLabel: _t("Square 2"), + transform: false, + anmated: true, + }, + "html_builder/solid/solid_square_3": { + selectLabel: _t("Square 3"), + transform: false, + anmated: true, + }, + }, + }, + specials: { + label: "Specials", + shapes: { + "html_builder/special/special_speed": { + selectLabel: _t("Speed"), + animated: true, + transform: false, + }, + "html_builder/special/special_rain": { + selectLabel: _t("Rain"), + animated: true, + transform: false, + }, + "html_builder/special/special_snow": { + selectLabel: _t("Snow"), + animated: true, + transform: false, + }, + "html_builder/special/special_layered": { + selectLabel: _t("Layered"), + animated: true, + transform: false, + }, + "html_builder/special/special_filter": { + selectLabel: _t("Filter"), + animated: true, + transform: false, + }, + "html_builder/special/special_flag": { + selectLabel: _t("Flag"), + animated: true, + }, + "html_builder/special/special_organic": { + selectLabel: _t("Organic"), + animated: true, + }, + }, + }, + }, + }, + devices: { + label: "Devices", + subgroups: { + devices: { + label: "Devices", + shapes: { + "html_builder/devices/iphone_front_portrait": { + selectLabel: _t("iPhone #1"), + imgSize: "0.46:1", + transform: false, + }, + "html_builder/devices/iphone_3d_portrait_01": { + selectLabel: _t("iPhone #2"), + imgSize: "0.46:1", + transform: false, + }, + "html_builder/devices/iphone_3d_portrait_02": { + selectLabel: _t("iPhone #3"), + imgSize: "0.46:1", + transform: false, + }, + "html_builder/devices/iphone_front_landscape": { + selectLabel: _t("iPhone #4"), + imgSize: "2.17:1", + transform: false, + }, + "html_builder/devices/iphone_3d_landscape_01": { + selectLabel: _t("iPhone #5"), + imgSize: "2.17:1", + transform: false, + }, + "html_builder/devices/iphone_3d_landscape_02": { + selectLabel: _t("iPhone #6"), + imgSize: "2.17:1", + transform: false, + }, + "html_builder/devices/galaxy_front_portrait": { + selectLabel: _t("Galaxy S #1"), + imgSize: "0.45:1", + transform: false, + }, + "html_builder/devices/galaxy_3d_portrait_01": { + selectLabel: _t("Galaxy S #2"), + imgSize: "0.45:1", + transform: false, + }, + "html_builder/devices/galaxy_3d_portrait_02": { + selectLabel: _t("Galaxy S #3"), + imgSize: "0.45:1", + transform: false, + }, + "html_builder/devices/galaxy_front_landscape": { + selectLabel: _t("Galaxy S #4"), + imgSize: "2.22:1", + transform: false, + }, + "html_builder/devices/galaxy_3d_landscape_01": { + selectLabel: _t("Galaxy S #5"), + imgSize: "2.22:1", + transform: false, + }, + "html_builder/devices/galaxy_3d_landscape_02": { + selectLabel: _t("Galaxy S #6"), + imgSize: "2.22:1", + transform: false, + }, + "html_builder/devices/galaxy_front_portrait_half": { + selectLabel: _t("Half Galaxy S"), + imgSize: "0.45:1", + transform: false, + }, + "html_builder/devices/ipad_front_portrait": { + selectLabel: _t("iPad #1"), + imgSize: "0.75:1", + transform: false, + }, + "html_builder/devices/ipad_3d_portrait_01": { + selectLabel: _t("iPad #2"), + imgSize: "0.75:1", + transform: false, + }, + "html_builder/devices/ipad_3d_portrait_02": { + selectLabel: _t("iPad #3"), + imgSize: "0.75:1", + transform: false, + }, + "html_builder/devices/ipad_front_landscape": { + selectLabel: _t("iPad #4"), + imgSize: "4:3", + transform: false, + }, + "html_builder/devices/ipad_3d_landscape_01": { + selectLabel: _t("iPad #5"), + imgSize: "4:3", + transform: false, + }, + "html_builder/devices/ipad_3d_landscape_02": { + selectLabel: _t("iPad #6"), + imgSize: "4:3", + transform: false, + }, + "html_builder/devices/imac_front": { + selectLabel: _t("iMac #1"), + imgSize: "16:9", + transform: false, + }, + "html_builder/devices/imac_3d_01": { + selectLabel: _t("iMac #2"), + imgSize: "16:9", + transform: false, + }, + "html_builder/devices/imac_3d_02": { + selectLabel: _t("iMac #3"), + imgSize: "16:9", + transform: false, + }, + "html_builder/devices/macbook_front": { + selectLabel: _t("MacBook #1"), + imgSize: "1.6:1", + transform: false, + }, + "html_builder/devices/macbook_3d_01": { + selectLabel: _t("MacBook #2"), + imgSize: "1.6:1", + transform: false, + }, + "html_builder/devices/macbook_3d_02": { + selectLabel: _t("MacBook #3"), + imgSize: "1.6:1", + transform: false, + }, + "html_builder/devices/browser_01": { + selectLabel: _t("Browser #1"), + transform: false, + }, + "html_builder/devices/browser_02": { + selectLabel: _t("Browser #2"), + transform: false, + }, + "html_builder/devices/browser_03": { + selectLabel: _t("Browser #3"), + transform: false, + }, + }, + }, + }, + }, +}; diff --git a/addons/html_builder/static/src/plugins/image/image_tool_option.js b/addons/html_builder/static/src/plugins/image/image_tool_option.js new file mode 100644 index 0000000000000..966b25af5b415 --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_tool_option.js @@ -0,0 +1,74 @@ +import { BaseOptionComponent, useDomState } from "@html_builder/core/utils"; +import { ImageShapeOption } from "./image_shape_option"; +import { clamp } from "@web/core/utils/numbers"; +import { KeepLast } from "@web/core/utils/concurrency"; +import { getMimetype } from "@html_editor/utils/image"; + +export class ImageToolOption extends BaseOptionComponent { + static template = "html_builder.ImageToolOption"; + static components = { + ImageShapeOption, + }; + static props = {}; + MAX_SUGGESTED_WIDTH = 1920; + setup() { + super.setup(); + const keepLast = new KeepLast(); + this.state = useDomState((editingElement) => { + keepLast + .add( + this.env.editor.shared.imageOptimize.computeAvailableFormats( + editingElement, + this.computeMaxDisplayWidth.bind(this) + ) + ) + .then((formats) => { + this.state.formats = formats; + }); + return { + isCustomFilter: editingElement.dataset.glFilter === "custom", + showQuality: ["image/jpeg", "image/webp"].includes(getMimetype(editingElement)), + formats: [], + }; + }); + } + computeMaxDisplayWidth(img) { + const window = img.ownerDocument.defaultView; + if (!window) { + return; + } + const computedStyles = window.getComputedStyle(img); + const displayWidth = parseFloat(computedStyles.getPropertyValue("width")); + const gutterWidth = + parseFloat(computedStyles.getPropertyValue("--o-grid-gutter-width")) || 30; + + // For the logos we don't want to suggest a width too small. + if (img.closest("nav")) { + return Math.round(Math.min(displayWidth * 3, this.MAX_SUGGESTED_WIDTH)); + // If the image is in a container(-small), it might get bigger on + // smaller screens. So we suggest the width of the current image unless + // it is smaller than the size of the container on the md breapoint + // (which is where our bootstrap columns fallback to full container + // width since we only use col-lg-* in Odoo). + } else if (img.closest(".container, .o_container_small")) { + const mdContainerMaxWidth = + parseFloat(computedStyles.getPropertyValue("--o-md-container-max-width")) || 720; + const mdContainerInnerWidth = mdContainerMaxWidth - gutterWidth; + return Math.round(clamp(displayWidth, mdContainerInnerWidth, this.MAX_SUGGESTED_WIDTH)); + // If the image is displayed in a container-fluid, it might also get + // bigger on smaller screens. The same way, we suggest the width of the + // current image unless it is smaller than the max size of the container + // on the md breakpoint (which is the LG breakpoint since the container + // fluid is full-width). + } else if (img.closest(".container-fluid")) { + const lgBp = parseFloat(computedStyles.getPropertyValue("--breakpoint-lg")) || 992; + const mdContainerFluidMaxInnerWidth = lgBp - gutterWidth; + return Math.round( + clamp(displayWidth, mdContainerFluidMaxInnerWidth, this.MAX_SUGGESTED_WIDTH) + ); + } + // If it's not in a container, it's probably not going to change size + // depending on breakpoints. We still keep a margin safety. + return Math.round(Math.min(displayWidth * 1.5, this.MAX_SUGGESTED_WIDTH)); + } +} diff --git a/addons/html_builder/static/src/plugins/image/image_tool_option.xml b/addons/html_builder/static/src/plugins/image/image_tool_option.xml new file mode 100644 index 0000000000000..89f0b35e032ad --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_tool_option.xml @@ -0,0 +1,145 @@ + + + + + + + + + + + + + + Reset + + Reset + + + + None + Blur + 1977 + Aden + Brannan + EarlyBird + Inkwell + Maven + Toaster + Walden + Valencia + Xpro + Custom + + + + + + Normal + Overlay + Screen + Multiply + Add + Exclusion + Darken + Lighten + + + + + + + + + + + + + + + + + + + + + + Default + 25% + 50% + 100% + + + + + + + + + + + + + + + + + + + + + None + Left + Center + Right + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/image/image_tool_option_plugin.js b/addons/html_builder/static/src/plugins/image/image_tool_option_plugin.js new file mode 100644 index 0000000000000..61ef09ae947f6 --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/image_tool_option_plugin.js @@ -0,0 +1,280 @@ +import { cropperDataFieldsWithAspectRatio, isGif } from "@html_editor/utils/image_processing"; +import { registry } from "@web/core/registry"; +import { Plugin } from "@html_editor/plugin"; +import { normalizeColor } from "@html_builder/utils/utils_css"; +import { ImageToolOption } from "./image_tool_option"; +import { ReplaceMediaOption, searchSupportedParentLinkEl } from "./replace_media_option"; +import { defaultImageFilterOptions } from "@html_editor/main/media/image_post_process_plugin"; +import { isImageCorsProtected, getMimetype } from "@html_editor/utils/image"; +import { withSequence } from "@html_editor/utils/resource"; +import { + REPLACE_MEDIA, + IMAGE_TOOL, + ALIGNMENT_STYLE_PADDING, +} from "@html_builder/utils/option_sequence"; + +class ImageToolOptionPlugin extends Plugin { + static id = "imageToolOption"; + static dependencies = [ + "history", + "userCommand", + "imagePostProcess", + "imageCrop", + "media", + "builder-options", + ]; + static shared = ["canHaveHoverEffect"]; + resources = { + builder_options: [ + withSequence(REPLACE_MEDIA, { + OptionComponent: ReplaceMediaOption, + selector: "img, .media_iframe_video, span.fa, i.fa", + exclude: + "[data-oe-xpath], a[href^='/website/social/'] > i.fa, a[class*='s_share_'] > i.fa", + }), + withSequence(IMAGE_TOOL, { + OptionComponent: ImageToolOption, + selector: "img", + }), + withSequence(ALIGNMENT_STYLE_PADDING, { + template: "html_builder.ImageAndFaOption", + selector: "span.fa, i.fa, img", + exclude: "[data-oe-type='image'] > img, [data-oe-xpath]", + }), + ], + builder_actions: this.getActions(), + }; + getActions() { + return { + cropImage: { + isApplied: ({ editingElement }) => + cropperDataFieldsWithAspectRatio.some((field) => editingElement.dataset[field]), + load: ({ editingElement: img }) => + new Promise((resolve) => { + this.dependencies.imageCrop.openCropImage(img, { + onClose: resolve, + onSave: async (newDataset) => { + resolve( + this.dependencies.imagePostProcess.processImage(img, newDataset) + ); + }, + }); + }), + apply: ({ loadResult: updateImageAttributes }) => { + updateImageAttributes?.(); + }, + }, + resetCrop: { + load: async ({ editingElement: img }) => { + const newDataset = Object.fromEntries( + cropperDataFieldsWithAspectRatio.map((field) => [field, undefined]) + ); + return await this.dependencies.imagePostProcess.processImage(img, newDataset); + }, + apply: ({ loadResult: updateImageAttributes }) => { + updateImageAttributes(); + }, + }, + transformImage: { + isApplied: ({ editingElement }) => editingElement.matches(`[style*="transform"]`), + apply: () => { + this.dependencies.userCommand.getCommand("transformImage").run(); + }, + }, + resetTransformImage: { + apply: ({ editingElement }) => { + editingElement.setAttribute( + "style", + (editingElement.getAttribute("style") || "").replace( + /[^;]*transform[\w:]*;?/g, + "" + ) + ); + }, + }, + glFilter: { + isApplied: ({ editingElement, param: { mainParam: glFilterName } }) => { + if (glFilterName) { + return editingElement.dataset.glFilter === glFilterName; + } else { + return !editingElement.dataset.glFilter; + } + }, + load: async ({ editingElement: img, param: { mainParam: glFilterName } }) => + await this.dependencies.imagePostProcess.processImage(img, { + glFilter: glFilterName, + }), + apply: ({ loadResult: updateImageAttributes }) => { + updateImageAttributes(); + }, + }, + setCustomFilter: { + getValue: ({ editingElement, param: { mainParam: filterProperty } }) => { + const filterOptions = JSON.parse(editingElement.dataset.filterOptions || "{}"); + return ( + filterOptions[filterProperty] || defaultImageFilterOptions[filterProperty] + ); + }, + isApplied: ({ + editingElement, + param: { mainParam: filterProperty }, + value: filterValue, + }) => { + const filterOptions = JSON.parse(editingElement.dataset.filterOptions || "{}"); + return ( + filterValue === + (filterOptions[filterProperty] || defaultImageFilterOptions[filterProperty]) + ); + }, + load: async ({ + editingElement: img, + param: { mainParam: filterProperty }, + value, + }) => { + const filterOptions = JSON.parse(img.dataset.filterOptions || "{}"); + filterOptions[filterProperty] = + filterProperty === "filterColor" ? normalizeColor(value) : value; + return await this.dependencies.imagePostProcess.processImage(img, { + filterOptions: JSON.stringify(filterOptions), + }); + }, + apply: ({ loadResult: updateImageAttributes }) => { + updateImageAttributes(); + }, + }, + replaceMedia: { + load: async ({ editingElement }) => { + let icon; + await this.dependencies.media.openMediaDialog({ + node: editingElement, + save: (newIcon) => { + icon = newIcon; + }, + }); + return icon; + }, + apply: ({ editingElement, loadResult: newImage }) => { + if (!newImage) { + return; + } + editingElement.replaceWith(newImage); + this.dependencies.history.addStep(); + this.dependencies["builder-options"].updateContainers(newImage); + }, + }, + setLink: { + preview: false, + apply: ({ editingElement }) => { + const parentEl = searchSupportedParentLinkEl(editingElement); + if (parentEl.tagName !== "A") { + const wrapperEl = document.createElement("a"); + editingElement.after(wrapperEl); + wrapperEl.appendChild(editingElement); + } else { + const fragment = document.createDocumentFragment(); + fragment.append(...parentEl.childNodes); + parentEl.replaceWith(fragment); + } + }, + isApplied: ({ editingElement }) => { + const parentEl = searchSupportedParentLinkEl(editingElement); + return parentEl.tagName === "A"; + }, + }, + setUrl: { + preview: false, + apply: ({ editingElement, value }) => { + const linkEl = searchSupportedParentLinkEl(editingElement); + let url = value; + if (!url) { + // As long as there is no URL, the image is not considered a link. + linkEl.removeAttribute("href"); + return; + } + if ( + !url.startsWith("/") && + !url.startsWith("#") && + !/^([a-zA-Z]*.):.+$/gm.test(url) + ) { + // We permit every protocol (http:, https:, ftp:, mailto:,...). + // If none is explicitly specified, we assume it is a http. + url = "http://" + url; + } + linkEl.setAttribute("href", url); + }, + getValue: ({ editingElement }) => { + const linkEl = searchSupportedParentLinkEl(editingElement); + return linkEl.getAttribute("href"); + }, + }, + setNewWindow: { + preview: false, + apply: ({ editingElement, value }) => { + const linkEl = searchSupportedParentLinkEl(editingElement); + linkEl.setAttribute("target", "_blank"); + }, + clean: ({ editingElement }) => { + const linkEl = searchSupportedParentLinkEl(editingElement); + linkEl.removeAttribute("target"); + }, + isApplied: ({ editingElement }) => { + const linkEl = searchSupportedParentLinkEl(editingElement); + return linkEl.getAttribute("target") === "_blank"; + }, + }, + + alt: { + getValue: ({ editingElement: imgEl }) => imgEl.alt, + apply: ({ editingElement: imgEl, value }) => { + const trimmedValue = value.trim(); + if (trimmedValue) { + imgEl.alt = trimmedValue; + if (imgEl.getAttribute("role") === "presentation") { + imgEl.removeAttribute("role"); + } + } else { + imgEl.removeAttribute("alt"); + } + }, + }, + }; + } + async canHaveHoverEffect(img) { + return ( + img.tagName === "IMG" && + !this.isDeviceShape(img) && + !this.isAnimatedShape(img) && + this.isImageSupportedForShapes(img) && + !(await isImageCorsProtected(img)) + ); + } + isDeviceShape(img) { + const shapeName = img.dataset.shape; + if (!shapeName) { + return false; + } + const shapeCategory = shapeName.split("/")[1]; + return shapeCategory === "devices"; + } + isAnimatedShape(img) { + // todo: to implement while implementing the animated shapes + return false; + } + isImageSupportedForShapes(img) { + return img.dataset.originalId && isImageSupportedForProcessing(getMimetype(img)); + } +} +registry.category("website-plugins").add(ImageToolOptionPlugin.id, ImageToolOptionPlugin); + +/** + * @param {String} mimetype + * @param {Boolean} [strict=false] if true, even partially supported images (GIFs) + * won't be accepted. + * @returns {Boolean} + */ +function isImageSupportedForProcessing(mimetype, strict = false) { + if (isGif(mimetype)) { + return !strict; + } + return ["image/jpeg", "image/png", "image/webp"].includes(mimetype); +} diff --git a/addons/html_builder/static/src/plugins/image/replace_media_option.js b/addons/html_builder/static/src/plugins/image/replace_media_option.js new file mode 100644 index 0000000000000..f0bd19bf4b49f --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/replace_media_option.js @@ -0,0 +1,47 @@ +import { BaseOptionComponent, useDomState } from "@html_builder/core/utils"; + +export class ReplaceMediaOption extends BaseOptionComponent { + static template = "html_builder.ReplaceMediaOption"; + static props = {}; + setup() { + super.setup(); + this.state = useDomState((editingElement) => ({ + canSetLink: this.canSetLink(editingElement), + hasHref: this.hasHref(editingElement), + })); + } + canSetLink(editingElement) { + return ( + this.isImageSupportedForStyle(editingElement) && + !searchSupportedParentLinkEl(editingElement).matches("a[data-oe-xpath]") + ); + } + hasHref(editingElement) { + const parentEl = searchSupportedParentLinkEl(editingElement); + return parentEl.tagName === "A" && parentEl.hasAttribute("href"); + } + isImageSupportedForStyle(img) { + if (!img.parentElement) { + return false; + } + + // See also `[data-oe-type='image'] > img` added as data-exclude of some + // snippet options. + const isTFieldImg = "oeType" in img.parentElement.dataset; + + // Editable root elements are technically *potentially* supported here (if + // the edited attributes are not computed inside the related view, they + // could technically be saved... but as we cannot tell the computed ones + // apart from the "static" ones, we choose to not support edition at all in + // those "root" cases). + // See also `[data-oe-xpath]` added as data-exclude of some snippet options. + const isEditableRootElement = "oeXpath" in img.dataset; + + return !isTFieldImg && !isEditableRootElement; + } +} + +export function searchSupportedParentLinkEl(editingElement) { + const parentEl = editingElement.parentElement; + return parentEl.matches("figure") ? parentEl.parentElement : parentEl; +} diff --git a/addons/html_builder/static/src/plugins/image/replace_media_option.xml b/addons/html_builder/static/src/plugins/image/replace_media_option.xml new file mode 100644 index 0000000000000..c19537e451fa5 --- /dev/null +++ b/addons/html_builder/static/src/plugins/image/replace_media_option.xml @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/layout_option/add_element_option.js b/addons/html_builder/static/src/plugins/layout_option/add_element_option.js new file mode 100644 index 0000000000000..76c8a8595be68 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/add_element_option.js @@ -0,0 +1,12 @@ +import { BaseOptionComponent } from "@html_builder/core/utils"; + +export class AddElementOption extends BaseOptionComponent { + static template = "html_builder.AddElementOption"; + static props = { + level: { type: Number, optional: true }, + applyTo: { type: String, optional: true }, + }; + static defaultProps = { + level: 0, + }; +} diff --git a/addons/html_builder/static/src/plugins/layout_option/add_element_option.xml b/addons/html_builder/static/src/plugins/layout_option/add_element_option.xml new file mode 100644 index 0000000000000..f6fcbd1472d95 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/add_element_option.xml @@ -0,0 +1,17 @@ + + + + + + + Text + + + Image + + + Button + + + + diff --git a/addons/html_builder/static/src/plugins/layout_option/add_element_option_plugin.js b/addons/html_builder/static/src/plugins/layout_option/add_element_option_plugin.js new file mode 100644 index 0000000000000..8a8069fcd7074 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/add_element_option_plugin.js @@ -0,0 +1,143 @@ +import { resizeGrid, setElementToMaxZindex } from "@html_builder/utils/grid_layout_utils"; +import { Plugin } from "@html_editor/plugin"; +import { _t } from "@web/core/l10n/translation"; +import { registry } from "@web/core/registry"; + +export class AddElementOptionPlugin extends Plugin { + static id = "AddElementOption"; + static dependencies = ["history", "media"]; + resources = { + builder_actions: this.getActions(), + }; + + getActions() { + return { + addElText: { + apply: ({ editingElement }) => { + const colSize = 4; + const rowSize = 2; + + const newElement = document.createElement("p"); + newElement.textContent = _t("Write something..."); + + this.addElement(editingElement, newElement, colSize, rowSize, [ + "col-lg-4", + "g-col-lg-4", + "g-height-2", + ]); + }, + }, + addElImage: { + load: async () => { + let selectedImage; + await new Promise((resolve) => { + const onClose = this.dependencies.media.openMediaDialog({ + onlyImages: true, + save: (images) => { + selectedImage = images; + resolve(); + }, + }); + onClose.then(resolve); + }); + if (!selectedImage) { + return; + } + + await new Promise((resolve) => { + selectedImage.addEventListener("load", () => resolve(), { + once: true, + }); + }); + return selectedImage; + }, + apply: ({ editingElement, loadResult: image }) => { + if (!image) { + return; + } + const colSize = 6; + const rowSize = 6; + + this.addElement(editingElement, image, colSize, rowSize, [ + "col-lg-6", + "g-col-lg-6", + "g-height-6", + "o_grid_item_image", + ]); + }, + }, + addElButton: { + apply: ({ editingElement }) => { + const colSize = 2; + const rowSize = 1; + + const newButton = document.createElement("a"); + newButton.href = "#"; + newButton.classList.add("mb-2", "btn", "btn-primary"); + newButton.textContent = "Button"; + + this.addElement(editingElement, newButton, colSize, rowSize, [ + "col-lg-2", + "g-col-lg-2", + "g-height-1", + ]); + }, + }, + }; + } + + /** + * Adds an image, some text or a button in the grid. + * + * It can probaly be refactored and improved. + * + * @see this.selectClass for parameters + * @see based on addons/web_editor/static/src/js/editor/snippets.options.js::addElement() + */ + addElement(container, element, colSize, rowSize, classes) { + // If it has been less than 15 seconds that we have added an element, + // shift the new element right and down by one cell. Otherwise, put it + // in the top left corner. + const currentTime = new Date().getTime(); + if (this.lastAddTime && (currentTime - this.lastAddTime) / 1000 < 15) { + this.lastStartPosition = [this.lastStartPosition[0] + 1, this.lastStartPosition[1] + 1]; + } else { + this.lastStartPosition = [1, 1]; // [rowStart, columnStart] + } + this.lastAddTime = currentTime; + + // Create the new column. + const newColumnEl = document.createElement("div"); + newColumnEl.classList.add("o_grid_item", ...classes); + newColumnEl.appendChild(element); + + // Place the column in the grid. + const rowStart = this.lastStartPosition[0]; + let columnStart = this.lastStartPosition[1]; + if (columnStart + colSize > 13) { + columnStart = 1; + this.lastStartPosition[1] = columnStart; + } + newColumnEl.style.gridArea = `${rowStart} / ${columnStart} / ${rowStart + rowSize} / ${ + columnStart + colSize + }`; + + // Setting the z-index to the maximum of the grid. + setElementToMaxZindex(newColumnEl, container); + + // Add the new column and update the grid height. + container.appendChild(newColumnEl); + resizeGrid(container); + + const newColumnPosition = newColumnEl.getBoundingClientRect(); + const middleX = (newColumnPosition.left + newColumnPosition.right) / 2; + const middleY = (newColumnPosition.top + newColumnPosition.bottom) / 2; + const sameCoordinatesEl = this.document.elementFromPoint(middleX, middleY); + if (!sameCoordinatesEl || !newColumnEl.contains(sameCoordinatesEl)) { + newColumnEl.scrollIntoView({ behavior: "smooth", block: "center" }); + } + this.dependencies.history.addStep(); + } +} + +registry.category("website-plugins").add(AddElementOptionPlugin.id, AddElementOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/layout_option/grid_column_option.js b/addons/html_builder/static/src/plugins/layout_option/grid_column_option.js new file mode 100644 index 0000000000000..c3b04df8d9afe --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/grid_column_option.js @@ -0,0 +1,13 @@ +import { BaseOptionComponent, useDomState } from "../../core/utils"; + +export class GridColumnsOption extends BaseOptionComponent { + static template = "html_builder.GridColumnsOption"; + static props = {}; + + setup() { + super.setup(); + this.state = useDomState((editingElement) => ({ + isGridMode: editingElement.parentElement.classList.contains("o_grid_mode"), + })); + } +} diff --git a/addons/html_builder/static/src/plugins/layout_option/grid_column_option.xml b/addons/html_builder/static/src/plugins/layout_option/grid_column_option.xml new file mode 100644 index 0000000000000..c99dc45b6f0eb --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/grid_column_option.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/layout_option/grid_column_option_plugin.js b/addons/html_builder/static/src/plugins/layout_option/grid_column_option_plugin.js new file mode 100644 index 0000000000000..7910ad1403111 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/grid_column_option_plugin.js @@ -0,0 +1,45 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { GridColumnsOption } from "./grid_column_option"; +import { withSequence } from "@html_editor/utils/resource"; +import { GRID_COLUMNS } from "@html_builder/website_builder/option_sequence"; + +export class GridColumnsOptionPlugin extends Plugin { + static id = "GridColumnsOption"; + static dependencies = ["builderActions"]; + resources = { + builder_options: [ + withSequence(GRID_COLUMNS, { + OptionComponent: GridColumnsOption, + selector: ".row:not(.s_col_no_resize) > div", + }), + ], + builder_actions: this.getActions(), + system_classes: ["o_we_padding_highlight"], + }; + + getActions() { + const builderActions = this.dependencies.builderActions; + return { + get setGridColumnsPadding() { + const styleAction = builderActions.getAction("styleAction"); + const removePaddingPreview = ({ target: editingElement }) => { + editingElement.classList.remove("o_we_padding_highlight"); + editingElement.removeEventListener("animationend", removePaddingPreview); + }; + return { + ...styleAction, + apply: (...args) => { + const { editingElement } = args[0]; + removePaddingPreview({ target: editingElement }); + styleAction.apply(...args); + editingElement.classList.add("o_we_padding_highlight"); + editingElement.addEventListener("animationend", removePaddingPreview); + }, + }; + }, + }; + } +} + +registry.category("website-plugins").add(GridColumnsOptionPlugin.id, GridColumnsOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/layout_option/layout_option.js b/addons/html_builder/static/src/plugins/layout_option/layout_option.js new file mode 100644 index 0000000000000..a33075b4c9de8 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/layout_option.js @@ -0,0 +1,31 @@ +import { BaseOptionComponent } from "@html_builder/core/utils"; +import { AddElementOption } from "./add_element_option"; +import { SelectNumberColumn } from "./select_number_column"; +import { SpacingOption } from "./spacing_option"; + +export class LayoutOption extends BaseOptionComponent { + static template = "html_builder.LayoutOption"; + static components = { + SelectNumberColumn, + SpacingOption, + AddElementOption, + }; + static props = {}; +} + +export class LayoutGridOption extends BaseOptionComponent { + static template = "html_builder.LayoutGridOption"; + static components = { + SpacingOption, + AddElementOption, + }; + static props = {}; +} + +export class LayoutColumnOption extends BaseOptionComponent { + static template = "html_builder.LayoutColumnOption"; + static components = { + SelectNumberColumn, + }; + static props = {}; +} diff --git a/addons/html_builder/static/src/plugins/layout_option/layout_option.xml b/addons/html_builder/static/src/plugins/layout_option/layout_option.xml new file mode 100644 index 0000000000000..1abfdcfaf7389 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/layout_option.xml @@ -0,0 +1,29 @@ + + + + + + + Grid + Column + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/layout_option/layout_option_plugin.js b/addons/html_builder/static/src/plugins/layout_option/layout_option_plugin.js new file mode 100644 index 0000000000000..6972bd7132653 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/layout_option_plugin.js @@ -0,0 +1,177 @@ +import { getFirstItem, getNbColumns } from "@html_builder/utils/column_layout_utils"; +import { + convertToNormalColumn, + reloadLazyImages, + toggleGridMode, +} from "@html_builder/utils/grid_layout_utils"; +import { isMobileView } from "@html_builder/utils/utils"; +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { LayoutColumnOption, LayoutGridOption, LayoutOption } from "./layout_option"; +import { withSequence } from "@html_editor/utils/resource"; +import { LAYOUT, LAYOUT_COLUMN, LAYOUT_GRID } from "@html_builder/website_builder/option_sequence"; + +class LayoutOptionPlugin extends Plugin { + static id = "LayoutOption"; + static dependencies = ["clone", "selection"]; + resources = { + builder_options: [ + withSequence(LAYOUT, { + OptionComponent: LayoutOption, + selector: + "section, section.s_carousel_wrapper .carousel-item, .s_carousel_intro_item", + exclude: + ".s_dynamic, .s_dynamic_snippet_content, .s_dynamic_snippet_title, .s_masonry_block, .s_framed_intro, .s_features_grid, .s_media_list, .s_table_of_content, .s_process_steps, .s_image_gallery, .s_pricelist_boxed, .s_quadrant, .s_pricelist_cafe, .s_faq_horizontal, .s_image_frame, .s_card_offset, .s_contact_info, .s_tabs, .s_tabs_images", + applyTo: ":scope > *:has(> .row), :scope > .s_allow_columns", + }), + withSequence(LAYOUT_COLUMN, { + OptionComponent: LayoutColumnOption, + selector: "section.s_features_grid, section.s_process_steps", + applyTo: ":scope > *:has(> .row), :scope > .s_allow_columns", + }), + withSequence(LAYOUT_GRID, { + OptionComponent: LayoutGridOption, + selector: + "section.s_masonry_block, section.s_quadrant, section.s_image_frame, section.s_card_offset, section.s_contact_info", + applyTo: ":scope > *:has(> .row)", + }), + ], + + builder_actions: this.getActions(), + }; + + getActions() { + const getRow = (el) => el.querySelector(":scope > .row"); + const isGrid = (el) => { + const rowEl = getRow(el); + return !!(rowEl && rowEl.classList.contains("o_grid_mode")); + }; + const selectionPlugin = this.dependencies.selection; + return { + setGridLayout: { + apply: ({ editingElement }) => { + // TODO no preview/apply if it s isApplied + if (isGrid(editingElement)) { + return; + } + toggleGridMode(editingElement, selectionPlugin.preserveSelection); + }, + isApplied: ({ editingElement }) => isGrid(editingElement), + }, + setColumnLayout: { + apply: ({ editingElement }) => { + const rowEl = getRow(editingElement); + // TODO no preview/apply if it s isApplied + if (!isGrid(editingElement)) { + return; + } + + // Removing the grid class + rowEl.classList.remove("o_grid_mode"); + const columnEls = rowEl.children; + + for (const columnEl of columnEls) { + // Reloading the images. + reloadLazyImages(columnEl); + // Removing the grid properties. + convertToNormalColumn(columnEl); + } + // Removing the grid properties. + delete rowEl.dataset.rowCount; + // Kept for compatibility. + rowEl.style.removeProperty("--grid-item-padding-x"); + rowEl.style.removeProperty("--grid-item-padding-y"); + rowEl.style.removeProperty("gap"); + }, + isApplied: ({ editingElement }) => !isGrid(editingElement), + }, + changeColumnCount: { + apply: ({ editingElement, value: nbColumns }) => { + if (nbColumns === "custom") { + return; + } + + let rowEl = getRow(editingElement); + let columnEls, prevNbColumns; + if (!rowEl) { + // If there is no row, create one and wrap the content + // in a column. + const cursors = selectionPlugin.preserveSelection(); + rowEl = document.createElement("div"); + const columnEl = document.createElement("div"); + rowEl.classList.add("row"); + columnEl.classList.add("col-lg-12"); + columnEl.append(...editingElement.children); + rowEl.append(columnEl); + editingElement.append(rowEl); + cursors.restore(); + + columnEls = [columnEl]; + prevNbColumns = 0; + } else { + columnEls = rowEl.children; + prevNbColumns = getNbColumns(columnEls, isMobileView(this.editable)); + } + + if (nbColumns === prevNbColumns) { + return; + } + this.resizeColumns(columnEls, nbColumns || 1); + + const itemsDelta = nbColumns - rowEl.children.length; + if (itemsDelta > 0) { + for (let i = 0; i < itemsDelta; i++) { + const lastEl = rowEl.lastElementChild; + this.dependencies.clone.cloneElement(lastEl); + } + } + + // If "None" columns was chosen, unwrap the content from + // the column and the row and remove them. + if (nbColumns === 0) { + const cursors = selectionPlugin.preserveSelection(); + const columnEl = editingElement.querySelector(".row > div"); + editingElement.append(...columnEl.children); + rowEl.remove(); + cursors.restore(); + } + }, + isApplied: ({ editingElement, value }) => { + const columnEls = getRow(editingElement)?.children; + return getNbColumns(columnEls, isMobileView(this.editable)) === value; + }, + }, + }; + } + + /** + * Resizes the columns for the mobile or desktop view. + * + * @private + * @param {HTMLCollection} columnEls - the elements to resize + * @param {integer} nbColumns - the number of wanted columns + */ + resizeColumns(columnEls, nbColumns) { + const isMobile = isMobileView(this.editable); + const itemSize = Math.floor(12 / nbColumns) || 1; + const firstItem = getFirstItem(columnEls, isMobile); + const firstItemOffset = Math.floor((12 - itemSize * nbColumns) / 2); + + const resolutionModifier = isMobile ? "" : "-lg"; + const replacingRegex = + // (?!\S): following char cannot be a non-space character + new RegExp(`(?:^|\\s+)(col|offset)${resolutionModifier}(-\\d{1,2})?(?!\\S)`, "g"); + + for (const columnEl of columnEls) { + columnEl.className = columnEl.className.replace(replacingRegex, ""); + columnEl.classList.add(`col${resolutionModifier}-${itemSize}`); + if (firstItemOffset && columnEl === firstItem) { + columnEl.classList.add(`offset${resolutionModifier}-${firstItemOffset}`); + } + const hasMobileOffset = columnEl.className.match(/(^|\s+)offset-\d{1,2}(?!\S)/); + const hasDesktopOffset = columnEl.className.match(/(^|\s+)offset-lg-[1-9][0-1]?(?!\S)/); + columnEl.classList.toggle("offset-lg-0", hasMobileOffset && !hasDesktopOffset); + } + } +} +registry.category("website-plugins").add(LayoutOptionPlugin.id, LayoutOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/layout_option/select_number_column.js b/addons/html_builder/static/src/plugins/layout_option/select_number_column.js new file mode 100644 index 0000000000000..8edfce834d0ee --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/select_number_column.js @@ -0,0 +1,20 @@ +import { BaseOptionComponent, useDomState } from "@html_builder/core/utils"; +import { areColsCustomized } from "@html_builder/utils/column_layout_utils"; +import { isMobileView } from "@html_builder/utils/utils"; + +export class SelectNumberColumn extends BaseOptionComponent { + static template = "html_builder.SelectNumberColumn"; + static props = {}; + + setup() { + super.setup(); + this.state = useDomState((editingElement) => { + const columnEls = editingElement.querySelector(":scope > .row")?.children; + return { + isCustomColumn: + columnEls && areColsCustomized(columnEls, isMobileView(editingElement)), + canHaveZeroColumns: editingElement.matches(".s_allow_columns"), + }; + }); + } +} diff --git a/addons/html_builder/static/src/plugins/layout_option/select_number_column.xml b/addons/html_builder/static/src/plugins/layout_option/select_number_column.xml new file mode 100644 index 0000000000000..952ff791cd7e0 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/select_number_column.xml @@ -0,0 +1,16 @@ + + + + + + None + + + + Custom + + + + + + diff --git a/addons/html_builder/static/src/plugins/layout_option/spacing_option.js b/addons/html_builder/static/src/plugins/layout_option/spacing_option.js new file mode 100644 index 0000000000000..6938030c8a705 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/spacing_option.js @@ -0,0 +1,12 @@ +import { BaseOptionComponent } from "@html_builder/core/utils"; + +export class SpacingOption extends BaseOptionComponent { + static template = "html_builder.SpacingOption"; + static props = { + level: { type: Number, optional: true }, + applyTo: { type: String, optional: true }, + }; + static defaultProps = { + level: 0, + }; +} diff --git a/addons/html_builder/static/src/plugins/layout_option/spacing_option.xml b/addons/html_builder/static/src/plugins/layout_option/spacing_option.xml new file mode 100644 index 0000000000000..867342978a585 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/spacing_option.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/layout_option/spacing_option_plugin.js b/addons/html_builder/static/src/plugins/layout_option/spacing_option_plugin.js new file mode 100644 index 0000000000000..c25e431a07163 --- /dev/null +++ b/addons/html_builder/static/src/plugins/layout_option/spacing_option_plugin.js @@ -0,0 +1,76 @@ +import { Plugin } from "@html_editor/plugin"; +import { isBlock } from "@html_editor/utils/blocks"; +import { registry } from "@web/core/registry"; +import { addBackgroundGrid, setElementToMaxZindex } from "@html_builder/utils/grid_layout_utils"; + +class SpacingOptionPlugin extends Plugin { + static id = "SpacingOption"; + static dependencies = ["builderActions"]; + resources = { + builder_actions: this.getActions(), + savable_mutation_record_predicates: this.isMutationRecordSavable.bind(this), + on_cloned_handlers: this.onCloned.bind(this), + clean_for_save_handlers: this.cleanForSave.bind(this), + }; + + getActions() { + const builderActions = this.dependencies.builderActions; + return { + get setGridSpacing() { + const styleAction = builderActions.getAction("styleAction"); + return { + ...styleAction, + apply: (...args) => { + const rowEl = args[0].editingElement; + // Remove the grid preview if any. + let gridPreviewEl = rowEl.querySelector(".o_we_grid_preview"); + if (gridPreviewEl) { + gridPreviewEl.remove(); + } + // Apply the style action on the grid gaps. + styleAction.apply(...args); + // Add an animated grid preview. + gridPreviewEl = addBackgroundGrid(rowEl, 0); + gridPreviewEl.classList.add("o_we_grid_preview"); + setElementToMaxZindex(gridPreviewEl, rowEl); + gridPreviewEl.addEventListener("animationend", () => + gridPreviewEl.remove() + ); + }, + }; + }, + }; + } + + isMutationRecordSavable(record) { + // Do not consider the grid preview in the history. + if (record.type === "childList") { + const node = record.addedNodes[0] || record.removedNodes[0]; + if (node.matches && node.matches(".o_we_grid_preview") && isBlock(node)) { + return false; + } + } + if (record.type === "attributes") { + if (record.target.matches(".o_we_grid_preview")) { + return false; + } + } + return true; + } + + removeGridPreviews(el) { + el.querySelectorAll(".o_we_grid_preview").forEach((gridPreviewEl) => + gridPreviewEl.remove() + ); + } + + onCloned({ cloneEl }) { + this.removeGridPreviews(cloneEl); + } + + cleanForSave({ root }) { + this.removeGridPreviews(root); + } +} + +registry.category("website-plugins").add(SpacingOptionPlugin.id, SpacingOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/rating_option.xml b/addons/html_builder/static/src/plugins/rating_option.xml new file mode 100644 index 0000000000000..43042fd46c568 --- /dev/null +++ b/addons/html_builder/static/src/plugins/rating_option.xml @@ -0,0 +1,44 @@ + + + + + + + Stars + Thumbs + Circles + Squares + Hearts + Custom + + + + + Replace Icon + + + + Replace Icon + + + + / + + + + + + + + + + + + Top + Left + None + + + + + diff --git a/addons/html_builder/static/src/plugins/rating_option_plugin.js b/addons/html_builder/static/src/plugins/rating_option_plugin.js new file mode 100644 index 0000000000000..7729befebed36 --- /dev/null +++ b/addons/html_builder/static/src/plugins/rating_option_plugin.js @@ -0,0 +1,157 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; + +class RatingOptionPlugin extends Plugin { + static id = "ratingOption"; + static dependencies = ["history", "media"]; + selector = ".s_rating"; + resources = { + builder_options: { + template: "html_builder.RatingOption", + selector: ".s_rating", + }, + so_content_addition_selector: [".s_rating"], + builder_actions: this.getActions(), + }; + getActions() { + return { + setIcons: { + apply: ({ editingElement, param: { mainParam: iconParam } }) => { + editingElement.dataset.icon = iconParam; + renderIcons(editingElement); + delete editingElement.dataset.activeCustomIcon; + delete editingElement.dataset.inactiveCustomIcon; + }, + isApplied: ({ editingElement, param: { mainParam: iconParam } }) => + getIconType(editingElement) === iconParam, + }, + customIcon: { + load: async ({ editingElement, param: { mainParam: customParam } }) => + new Promise((resolve) => { + const isCustomActive = customParam === "customActiveIcon"; + const media = document.createElement("i"); + media.className = isCustomActive + ? getActiveCustomIcons(editingElement) + : getInactiveCustomIcons(editingElement); + const mediaDialogParams = { + noImages: true, + noDocuments: true, + noVideos: true, + media, + save: (icon) => { + resolve(icon); + }, + }; + const onClose = this.dependencies.media.openMediaDialog( + mediaDialogParams, + this.editable + ); + onClose.then(resolve); + }), + apply: ({ + editingElement, + loadResult: savedIconEl, + param: { mainParam: customParam }, + }) => { + if (!savedIconEl) { + return; + } + const isCustomActive = customParam === "customActiveIcon"; + const customClass = savedIconEl.className; + const activeIconEls = getActiveIcons(editingElement); + const inactiveIconEls = getInactiveIcons(editingElement); + const iconEls = isCustomActive ? activeIconEls : inactiveIconEls; + iconEls.forEach((iconEl) => (iconEl.className = customClass)); + const faClassActiveCustomIcons = + activeIconEls.length > 0 + ? activeIconEls[0].getAttribute("class") + : customClass; + const faClassInactiveCustomIcons = + inactiveIconEls.length > 0 + ? inactiveIconEls[0].getAttribute("class") + : customClass; + editingElement.dataset.activeCustomIcon = faClassActiveCustomIcons; + editingElement.dataset.inactiveCustomIcon = faClassInactiveCustomIcons; + editingElement.dataset.icon = "custom"; + }, + }, + activeIconsNumber: { + apply: ({ editingElement, value }) => { + const nbActiveIcons = parseInt(value); + const nbTotalIcons = getAllIcons(editingElement).length; + createIcons({ + editingElement: editingElement, + nbActiveIcons: nbActiveIcons, + nbTotalIcons: nbTotalIcons, + }); + }, + getValue: ({ editingElement }) => getActiveIcons(editingElement).length, + }, + totalIconsNumber: { + apply: ({ editingElement, value }) => { + const nbTotalIcons = Math.max(parseInt(value), 1); + const nbActiveIcons = getActiveIcons(editingElement).length; + createIcons({ + editingElement: editingElement, + nbActiveIcons: nbActiveIcons, + nbTotalIcons: nbTotalIcons, + }); + }, + getValue: ({ editingElement }) => getAllIcons(editingElement).length, + }, + }; + } +} + +registry.category("website-plugins").add(RatingOptionPlugin.id, RatingOptionPlugin); + +function createIcons({ editingElement, nbActiveIcons, nbTotalIcons }) { + const activeIconEl = editingElement.querySelector(".s_rating_active_icons"); + const inactiveIconEl = editingElement.querySelector(".s_rating_inactive_icons"); + const iconEls = getAllIcons(editingElement); + [...iconEls].forEach((iconEl) => iconEl.remove()); + for (let i = 0; i < nbTotalIcons; i++) { + if (i < nbActiveIcons) { + activeIconEl.appendChild(document.createElement("i")); + } else { + inactiveIconEl.append(document.createElement("i")); + } + } + renderIcons(editingElement); +} +function getActiveCustomIcons(editingElement) { + return editingElement.dataset.activeCustomIcon || ""; +} +function getActiveIcons(editingElement) { + return editingElement.querySelectorAll(".s_rating_active_icons > i"); +} +function getAllIcons(editingElement) { + return editingElement.querySelectorAll(".s_rating_icons i"); +} +function getIconType(editingElement) { + return editingElement.dataset.icon; +} +function getInactiveCustomIcons(editingElement) { + return editingElement.dataset.inactiveCustomIcon || ""; +} +function getInactiveIcons(editingElement) { + return editingElement.querySelectorAll(".s_rating_inactive_icons > i"); +} +function renderIcons(editingElement) { + const iconType = getIconType(editingElement); + const icons = { + "fa-star": "fa-star-o", + "fa-thumbs-up": "fa-thumbs-o-up", + "fa-circle": "fa-circle-o", + "fa-square": "fa-square-o", + "fa-heart": "fa-heart-o", + }; + const faClassActiveIcons = + iconType === "custom" ? getActiveCustomIcons(editingElement) : "fa " + iconType; + const faClassInactiveIcons = + iconType === "custom" ? getInactiveCustomIcons(editingElement) : "fa " + icons[iconType]; + const activeIconEls = getActiveIcons(editingElement); + const inactiveIconEls = getInactiveIcons(editingElement); + activeIconEls.forEach((activeIconEl) => (activeIconEl.className = faClassActiveIcons)); + inactiveIconEls.forEach((inactiveIconEl) => (inactiveIconEl.className = faClassInactiveIcons)); +} diff --git a/addons/html_builder/static/src/plugins/section_background_option.xml b/addons/html_builder/static/src/plugins/section_background_option.xml new file mode 100644 index 0000000000000..99296b1739319 --- /dev/null +++ b/addons/html_builder/static/src/plugins/section_background_option.xml @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/separator_option.xml b/addons/html_builder/static/src/plugins/separator_option.xml new file mode 100644 index 0000000000000..c2f464a835e6f --- /dev/null +++ b/addons/html_builder/static/src/plugins/separator_option.xml @@ -0,0 +1,23 @@ + + + + + + + + 25% + 50% + 75% + 100% + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/separator_option_plugin.js b/addons/html_builder/static/src/plugins/separator_option_plugin.js new file mode 100644 index 0000000000000..5bec927327d51 --- /dev/null +++ b/addons/html_builder/static/src/plugins/separator_option_plugin.js @@ -0,0 +1,21 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; + +class SeparatorOptionPlugin extends Plugin { + static id = "separatorOption"; + resources = { + builder_options: [ + { + template: "html_builder.SeparatorOption", + selector: ".s_hr", + applyTo: "hr", + }, + ], + dropzone_selector: { + selector: ".s_hr", + dropNear: "p, h1, h2, h3, blockquote, .s_hr", + }, + so_content_addition_selector: [".s_hr"], + }; +} +registry.category("website-plugins").add(SeparatorOptionPlugin.id, SeparatorOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/shadow_option.js b/addons/html_builder/static/src/plugins/shadow_option.js new file mode 100644 index 0000000000000..86381f2470cf6 --- /dev/null +++ b/addons/html_builder/static/src/plugins/shadow_option.js @@ -0,0 +1,13 @@ +import { BaseOptionComponent } from "@html_builder/core/utils"; + +export class ShadowOption extends BaseOptionComponent { + static template = "html_builder.ShadowOption"; + static props = { + setShadowModeAction: { type: String, optional: true }, + setShadowAction: { type: String, optional: true }, + }; + static defaultProps = { + setShadowModeAction: "setShadowMode", + setShadowAction: "setShadow", + }; +} diff --git a/addons/html_builder/static/src/plugins/shadow_option.xml b/addons/html_builder/static/src/plugins/shadow_option.xml new file mode 100644 index 0000000000000..a880c288ff58e --- /dev/null +++ b/addons/html_builder/static/src/plugins/shadow_option.xml @@ -0,0 +1,32 @@ + + + + + + + None + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/shadow_option_plugin.js b/addons/html_builder/static/src/plugins/shadow_option_plugin.js new file mode 100644 index 0000000000000..f35127041351d --- /dev/null +++ b/addons/html_builder/static/src/plugins/shadow_option_plugin.js @@ -0,0 +1,103 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; + +const shadowClass = "shadow"; + +class ShadowOptionPlugin extends Plugin { + static id = "shadowOption"; + static shared = ["getActions"]; + resources = { + builder_actions: this.getActions(), + }; + + getActions() { + return { + setShadowMode: { + isApplied: ({ editingElement, value: shadowMode }) => + shadowMode === getShadowMode(editingElement), + getValue: ({ editingElement }) => getShadowMode(editingElement, "mode"), + apply: ({ editingElement, value: shadowMode }) => { + if (shadowMode === "none") { + editingElement.classList.remove(shadowClass); + setBoxShadow(editingElement, ""); + return; + } + + if (!editingElement.classList.contains(shadowClass)) { + editingElement.classList.add(shadowClass); + } + if (editingElement.style["box-shadow"] === "") { + setBoxShadow(editingElement, getDefaultShadow(shadowMode)); + } else { + const shadow = getCurrentShadow(editingElement); + if (shadowMode === "inset") { + shadow.mode = "inset"; + } else { + shadow.mode = ""; + } + setBoxShadow(editingElement, shadowToString(shadow)); + } + }, + }, + setShadow: { + apply: ({ editingElement, param: { mainParam: attributeName }, value }) => { + const shadow = getCurrentShadow(editingElement); + shadow[attributeName] = value; + setBoxShadow(editingElement, shadowToString(shadow)); + }, + getValue: ({ editingElement, param: { mainParam: attributeName } }) => + getCurrentShadow(editingElement)[attributeName], + }, + }; + } +} + +export function getDefaultShadow(mode) { + const el = document.createElement("div"); + el.classList.add(shadowClass); + document.body.appendChild(el); + const shadow = `${getComputedStyle(el).boxShadow}${mode === "inset" ? " inset" : ""}`; + el.remove(); + return shadow; +} + +function getShadowMode(editingElement) { + const currentBoxShadow = getComputedStyle(editingElement)["box-shadow"]; + if (currentBoxShadow === "none") { + return "none"; + } + if (currentBoxShadow.includes("inset")) { + return "inset"; + } + if (!currentBoxShadow.includes("inset") && currentBoxShadow !== "none") { + return "outset"; + } +} + +export function getCurrentShadow(editingElement) { + return parseShadow(getComputedStyle(editingElement)["box-shadow"]); +} + +function parseShadow(value) { + if (!value || value === "none") { + return {}; + } + const regex = + /(?(rgb(a)?\([^)]*\))|(var\([^)]+\)))\s+(?\d+px)\s+(?\d+px)\s+(?\d+px)\s+(?\d+px)(\s+)?(?\w+)?/; + return value.match(regex).groups; +} + +export function shadowToString(shadow) { + if (!shadow) { + return ""; + } + return `${shadow.color} ${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${ + shadow.mode ? shadow.mode : "" + }`; +} + +function setBoxShadow(editingElement, value) { + editingElement.style.setProperty("box-shadow", value, "important"); +} + +registry.category("website-plugins").add(ShadowOptionPlugin.id, ShadowOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/shape/shape_selector.js b/addons/html_builder/static/src/plugins/shape/shape_selector.js new file mode 100644 index 0000000000000..cc1920f8128af --- /dev/null +++ b/addons/html_builder/static/src/plugins/shape/shape_selector.js @@ -0,0 +1,28 @@ +import { BaseOptionComponent } from "@html_builder/core/utils"; +import { useRef } from "@odoo/owl"; +import { getShapeURL } from "../image/image_helpers"; + +export class ShapeSelector extends BaseOptionComponent { + static template = "html_builder.shapeSelector"; + static props = { + onClose: Function, + shapeGroups: Object, + shapeActionId: String, + buttonWrapperClassName: { type: String, optional: true }, + imgThroughDiv: { type: Boolean, optional: true }, + getShapeUrl: { type: Function, optional: true }, + }; + + setup() { + super.setup(); + this.rootRef = useRef("root"); + } + getShapeUrl(shapePath) { + return this.props.getShapeUrl ? this.props.getShapeUrl(shapePath) : getShapeURL(shapePath); + } + scrollToShapes(id) { + this.rootRef.el + ?.querySelector(`[data-shape-group-id="${id}"]`) + ?.scrollIntoView({ behavior: "smooth", block: "start" }); + } +} diff --git a/addons/html_builder/static/src/plugins/shape/shape_selector.xml b/addons/html_builder/static/src/plugins/shape/shape_selector.xml new file mode 100644 index 0000000000000..b1cc9f00d4d54 --- /dev/null +++ b/addons/html_builder/static/src/plugins/shape/shape_selector.xml @@ -0,0 +1,51 @@ + + + + +
+
+
+
+ + + +
+
+
+ +
+ + +
+ +
+ +
+ +
+ + + + + + + + + Animated +
+ +
+ +
+ +
+ +
+ + + + diff --git a/addons/html_builder/static/src/plugins/size_option.xml b/addons/html_builder/static/src/plugins/size_option.xml new file mode 100644 index 0000000000000..9d771c7da6c83 --- /dev/null +++ b/addons/html_builder/static/src/plugins/size_option.xml @@ -0,0 +1,14 @@ + + + + + + + Small + Medium + Large + + + + + diff --git a/addons/html_builder/static/src/plugins/size_option_plugin.js b/addons/html_builder/static/src/plugins/size_option_plugin.js new file mode 100644 index 0000000000000..657874f934dc8 --- /dev/null +++ b/addons/html_builder/static/src/plugins/size_option_plugin.js @@ -0,0 +1,16 @@ +import { withSequence } from "@html_editor/utils/resource"; +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; + +class SizeOptionPlugin extends Plugin { + static id = "sizeOption"; + resources = { + builder_options: [ + withSequence(20, { + template: "html_builder.SizeOption", + selector: ".s_alert", + }), + ], + }; +} +registry.category("website-plugins").add(SizeOptionPlugin.id, SizeOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/snippets_powerbox_plugin.js b/addons/html_builder/static/src/plugins/snippets_powerbox_plugin.js new file mode 100644 index 0000000000000..59dd8370f4b51 --- /dev/null +++ b/addons/html_builder/static/src/plugins/snippets_powerbox_plugin.js @@ -0,0 +1,138 @@ +import { Plugin } from "@html_editor/plugin" +import { _t } from "@web/core/l10n/translation"; +import { withSequence } from "@html_editor/utils/resource"; +import { registry } from "@web/core/registry"; + +class SnippetsPowerboxPlugin extends Plugin { + static id = "alert"; + static dependencies = ["dom", "history"]; + resources = { + user_commands: [ + { + id: "s_alert", + title: _t("Alert"), + description: _t("Insert an alert snippet"), + icon: "fa-info", + run: this.insertSnippet.bind(this, "s_alert"), + }, + { + id: "s_rating", + title: _t("Rating"), + description: _t("Insert a rating snippet"), + icon: "fa-star-half-o", + run: this.insertSnippet.bind(this, "s_rating"), + }, + { + id: "s_card", + title: _t("Card"), + description: _t("Insert a card snippet"), + icon: "fa-sticky-note", + run: this.insertSnippet.bind(this, "s_card"), + }, + { + id: "s_share", + title: _t("Share"), + description: _t("Insert a share snippet"), + icon: "fa-share-square-o", + run: this.insertSnippet.bind(this, "s_share"), + }, + { + id: "s_text_highlight", + title: _t("Text Highlight"), + description: _t("Insert a text highlight snippet"), + icon: "fa-sticky-note", + run: this.insertSnippet.bind(this, "s_text_highlight"), + }, + { + id: "s_chart", + title: _t("Chart"), + description: _t("Insert a chart snippet"), + icon: "fa-bar-chart", + run: this.insertSnippet.bind(this, "s_chart"), + }, + { + id: "s_progress_bar", + title: _t("Progress Bar"), + description: _t("Insert a progress bar snippet"), + icon: "fa-spinner", + run: this.insertSnippet.bind(this, "s_progress_bar"), + }, + { + id: "s_badge", + title: _t("Badge"), + description: _t("Insert a badge snippet"), + icon: "fa-tags", + run: this.insertSnippet.bind(this, "s_badge"), + }, + { + id: "s_blockquote", + title: _t("Blockquote"), + description: _t("Insert a blockquote snippet"), + icon: "fa-quote-left", + run: this.insertSnippet.bind(this, "s_blockquote"), + }, + { + id: "s_hr", + title: _t("Separator"), + description: _t("Insert a horizontal separator snippet"), + icon: "fa-minus", + run: this.insertSnippet.bind(this, "s_hr"), + }, + ], + powerbox_categories: withSequence(110, { + id: "website", + name: _t("Website"), + }), + powerbox_items: [ + { + categoryId: "website", + commandId: "s_alert", + }, + { + categoryId: "website", + commandId: "s_rating", + }, + { + categoryId: "website", + commandId: "s_card", + }, + { + categoryId: "website", + commandId: "s_share", + }, + { + categoryId: "website", + commandId: "s_text_highlight", + }, + { + categoryId: "website", + commandId: "s_chart", + }, + { + categoryId: "website", + commandId: "s_progress_bar", + }, + { + categoryId: "website", + commandId: "s_badge", + }, + { + categoryId: "website", + commandId: "s_blockquote", + }, + { + categoryId: "website", + commandId: "s_hr", + }, + ], + } + + insertSnippet(name) { + const snippet = this.services["html_builder.snippets"].getSnippetByName("snippet_content", name); + const content = snippet.content.cloneNode(true); + this.dependencies.dom.insert(content); + this.dependencies.history.addStep(); + } +} + +registry.category("website-plugins").add(SnippetsPowerboxPlugin.id, SnippetsPowerboxPlugin); diff --git a/addons/html_builder/static/src/plugins/text_alignment_option.xml b/addons/html_builder/static/src/plugins/text_alignment_option.xml new file mode 100644 index 0000000000000..85106bac6afa1 --- /dev/null +++ b/addons/html_builder/static/src/plugins/text_alignment_option.xml @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/text_alignment_option_plugin.js b/addons/html_builder/static/src/plugins/text_alignment_option_plugin.js new file mode 100644 index 0000000000000..ffeab6bac57ba --- /dev/null +++ b/addons/html_builder/static/src/plugins/text_alignment_option_plugin.js @@ -0,0 +1,18 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { withSequence } from "@html_editor/utils/resource"; +import { TEXT_ALIGNMENT } from "@html_builder/utils/option_sequence"; + +class TextAlignmentOptionPlugin extends Plugin { + static id = "textAlignmentOption"; + resources = { + builder_options: [ + withSequence(TEXT_ALIGNMENT, { + template: "html_builder.TextAlignmentOption", + selector: ".s_share, .s_text_highlight, .s_social_media", + }), + ], + }; +} + +registry.category("website-plugins").add(TextAlignmentOptionPlugin.id, TextAlignmentOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/timeline_images_option.xml b/addons/html_builder/static/src/plugins/timeline_images_option.xml new file mode 100644 index 0000000000000..ef64e25c5ce7e --- /dev/null +++ b/addons/html_builder/static/src/plugins/timeline_images_option.xml @@ -0,0 +1,18 @@ + + + + + + + Add Date + + + + + + diff --git a/addons/html_builder/static/src/plugins/timeline_images_option_plugin.js b/addons/html_builder/static/src/plugins/timeline_images_option_plugin.js new file mode 100644 index 0000000000000..e71bc3dcf8867 --- /dev/null +++ b/addons/html_builder/static/src/plugins/timeline_images_option_plugin.js @@ -0,0 +1,30 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { registry } from "@web/core/registry"; + +class TimelineImagesOptionPlugin extends Plugin { + static id = "timelineImagesOption"; + static dependencies = ["history"]; + resources = { + builder_options: [ + withSequence(5, { + template: "html_builder.TimelineImagesOption", + selector: ".s_timeline_images", + }), + withSequence(10, { + template: "html_builder.DotLinesColorOption", + selector: ".s_timeline_images", + }), + withSequence(5, { + template: "html_builder.DotColorOption", + selector: ".s_timeline_images .s_timeline_images_row", + }), + ], + dropzone_selector: { + selector: ".s_timeline_images_row", + dropNear: ".s_timeline_images_row", + }, + }; +} + +registry.category("website-plugins").add(TimelineImagesOptionPlugin.id, TimelineImagesOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/utils.js b/addons/html_builder/static/src/plugins/utils.js new file mode 100644 index 0000000000000..1d9305a5bce7d --- /dev/null +++ b/addons/html_builder/static/src/plugins/utils.js @@ -0,0 +1,24 @@ +export function applyFunDependOnSelectorAndExclude(fn, rootEl, selectorParams) { + const editingEls = getEditingEls(rootEl, selectorParams); + if (!editingEls.length) { + return false; + } + return Promise.all(editingEls.map((el) => fn(el))); +} + +export function getEditingEls(rootEl, { selector, exclude, applyTo }) { + const closestSelector = rootEl.closest(selector); + let editingEls = closestSelector ? [closestSelector] : [...rootEl.querySelectorAll(selector)]; + if (exclude) { + editingEls = editingEls.filter((selectorEl) => !selectorEl.matches(exclude)); + } + if (!applyTo) { + return editingEls; + } + const targetEls = []; + for (const editingEl of editingEls) { + const applyToEls = applyTo ? editingEl.querySelectorAll(applyTo) : [editingEl]; + targetEls.push(...applyToEls); + } + return targetEls; +} diff --git a/addons/html_builder/static/src/plugins/vertical_alignment_option.js b/addons/html_builder/static/src/plugins/vertical_alignment_option.js new file mode 100644 index 0000000000000..f618062d0004a --- /dev/null +++ b/addons/html_builder/static/src/plugins/vertical_alignment_option.js @@ -0,0 +1,12 @@ +import { BaseOptionComponent } from "@html_builder/core/utils"; + +export class VerticalAlignmentOption extends BaseOptionComponent { + static template = "html_builder.VerticalAlignmentOption"; + static props = { + level: { type: Number, optional: true }, + applyTo: { type: String, optional: true }, + }; + static defaultProps = { + level: 0, + }; +} diff --git a/addons/html_builder/static/src/plugins/vertical_alignment_option.xml b/addons/html_builder/static/src/plugins/vertical_alignment_option.xml new file mode 100644 index 0000000000000..0a765d4df846f --- /dev/null +++ b/addons/html_builder/static/src/plugins/vertical_alignment_option.xml @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/vertical_alignment_option_plugin.js b/addons/html_builder/static/src/plugins/vertical_alignment_option_plugin.js new file mode 100644 index 0000000000000..98fcc6d47f95e --- /dev/null +++ b/addons/html_builder/static/src/plugins/vertical_alignment_option_plugin.js @@ -0,0 +1,46 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { classAction } from "../core/core_builder_action_plugin"; +import { VerticalAlignmentOption } from "./vertical_alignment_option"; +import { withSequence } from "@html_editor/utils/resource"; +import { VERTICAL_ALIGNMENT } from "@html_builder/website_builder/option_sequence"; + +class VerticalAlignmentOptionPlugin extends Plugin { + static id = "verticalAlignmentOption"; + resources = { + builder_options: [ + withSequence(VERTICAL_ALIGNMENT, { + OptionComponent: VerticalAlignmentOption, + selector: + ".s_text_image, .s_image_text, .s_three_columns, .s_showcase, .s_numbers, .s_faq_collapse, .s_references, .s_accordion_image, .s_shape_image", + applyTo: ".row", + props: { + level: 1, + }, + }), + ], + builder_actions: this.getActions(), + }; + + getActions() { + return { + setVerticalAlignment: { + ...classAction, + getPriority: ({ param: { mainParam: classNames } = { mainParam: "" } }) => + classNames === "align-items-stretch" ? 0 : 1, + isApplied: (...args) => { + const { + param: { mainParam: classNames }, + } = args[0]; + if (classNames === "align-items-stretch") { + return true; + } + return classAction.isApplied(...args); + }, + }, + }; + } +} +registry + .category("website-plugins") + .add(VerticalAlignmentOptionPlugin.id, VerticalAlignmentOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/vertical_justify_option.xml b/addons/html_builder/static/src/plugins/vertical_justify_option.xml new file mode 100644 index 0000000000000..c315da7728afc --- /dev/null +++ b/addons/html_builder/static/src/plugins/vertical_justify_option.xml @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + diff --git a/addons/html_builder/static/src/plugins/vertical_justify_option_plugin.js b/addons/html_builder/static/src/plugins/vertical_justify_option_plugin.js new file mode 100644 index 0000000000000..e036d14038880 --- /dev/null +++ b/addons/html_builder/static/src/plugins/vertical_justify_option_plugin.js @@ -0,0 +1,20 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { withSequence } from "@html_editor/utils/resource"; + +class VerticalJustifyOptionPlugin extends Plugin { + static id = "verticalJustifyOption"; + resources = { + builder_options: [ + withSequence(25, { + template: "html_builder.VerticalJustifyOption", + selector: ".s_masonry_block .o_grid_item, .s_quadrant .o_grid_item", + exclude: ".o_grid_item_image", + }), + ], + }; +} + +registry + .category("website-plugins") + .add(VerticalJustifyOptionPlugin.id, VerticalJustifyOptionPlugin); diff --git a/addons/html_builder/static/src/plugins/width_option.xml b/addons/html_builder/static/src/plugins/width_option.xml new file mode 100644 index 0000000000000..c5220cbd8b3e5 --- /dev/null +++ b/addons/html_builder/static/src/plugins/width_option.xml @@ -0,0 +1,15 @@ + + + + + + + 25% + 50% + 75% + 100% + + + + + diff --git a/addons/html_builder/static/src/plugins/width_option_plugin.js b/addons/html_builder/static/src/plugins/width_option_plugin.js new file mode 100644 index 0000000000000..076850f5253ae --- /dev/null +++ b/addons/html_builder/static/src/plugins/width_option_plugin.js @@ -0,0 +1,17 @@ +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { registry } from "@web/core/registry"; +import { WIDTH } from "@html_builder/website_builder/option_sequence"; + +class WidthOptionPlugin extends Plugin { + static id = "widthOption"; + resources = { + builder_options: [ + withSequence(WIDTH, { + template: "html_builder.WidthOption", + selector: ".s_alert, .s_blockquote, .s_text_highlight", + }), + ], + }; +} +registry.category("website-plugins").add(WidthOptionPlugin.id, WidthOptionPlugin); diff --git a/addons/html_builder/static/src/sidebar/block_tab.js b/addons/html_builder/static/src/sidebar/block_tab.js new file mode 100644 index 0000000000000..81ccde7bf8367 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/block_tab.js @@ -0,0 +1,384 @@ +import { Component, onMounted, onWillDestroy, useRef, useState } from "@odoo/owl"; +import { useService } from "@web/core/utils/hooks"; +import { Tooltip } from "@web/core/tooltip/tooltip"; +import { getScrollingElement } from "@web/core/utils/scrolling"; +import { _t } from "@web/core/l10n/translation"; +import { closest } from "@web/core/utils/ui"; +import { useDragAndDrop } from "@html_editor/utils/drag_and_drop"; +import { getCSSVariableValue } from "@html_builder/utils/utils_css"; +import { scrollTo } from "@html_builder/utils/scrolling"; +import { Snippet } from "./snippet"; +import { CustomInnerSnippet } from "./custom_inner_snippet"; + +export class BlockTab extends Component { + static template = "html_builder.BlockTab"; + static components = { Snippet, CustomInnerSnippet }; + static props = {}; + + setup() { + this.dialog = useService("dialog"); + this.orm = useService("orm"); + this.popover = useService("popover"); + this.snippetModel = useState(useService("html_builder.snippets")); + this.blockTabRef = useRef("block-tab"); + // Needed to avoid race condition in tours. + this.state = useState({ ongoingInsertion: false }); + + onMounted(() => { + this.makeSnippetDraggable(); + }); + + onWillDestroy(() => { + this.draggableComponent?.destroy(); + }); + } + + get document() { + return this.env.editor.document; + } + + get editable() { + return this.env.editor.editable; + } + + get shared() { + return this.env.editor.shared; + } + + get resources() { + return this.env.editor.resources; + } + + onSnippetGroupClick(snippet) { + this.shared.operation.next( + async () => { + let snippetEl; + this.state.ongoingInsertion = true; + await new Promise((resolve) => { + this.snippetModel.openSnippetDialog(snippet, { + onSelect: (snippet) => { + snippetEl = snippet.content.cloneNode(true); + const selectors = this.shared.dropzone.getSelectors(snippetEl, snippet); + // Add the dropzones corresponding to the selected + // snippet and make them invisible. + const dropzoneEls = this.shared.dropzone.activateDropzones(selectors); + this.editable + .querySelectorAll(".oe_drop_zone") + .forEach((dropzoneEl) => dropzoneEl.classList.add("invisible")); + + // Find the dropzone closest to the center of the + // viewport. + const iframeWindow = this.document.defaultView; + const viewPortCenterPoint = { + x: iframeWindow.innerWidth / 2, + y: iframeWindow.innerHeight / 2, + }; + const closestDropzoneEl = closest(dropzoneEls, viewPortCenterPoint); + // Insert the selected snippet. + closestDropzoneEl.after(snippetEl); + this.shared.dropzone.removeDropzones(); + return snippetEl; + }, + onClose: () => { + resolve(); + }, + }); + }); + + if (snippetEl) { + await this.processDroppedSnippet(snippetEl); + } + this.state.ongoingInsertion = false; + }, + { withLoadingEffect: false } + ); + } + + /** + * Opens and manages the snippet dialog after dropping a snippet group + * If a snippet is selected in the dialog, it will replace the given + * placeholder snippet. + * + * @param {Object} snippet the dropped snippet group + * @param {HTMLElement} hookEl the placeholder snippet + */ + async onSnippetGroupDrop(snippet, hookEl) { + this.state.ongoingInsertion = true; + // Exclude the snippets that are not allowed to be dropped at the + // current position. + const hookParentEl = hookEl.parentElement; + this.snippetModel.snippetStructures.forEach((snippet) => { + const { selectorChildren } = this.shared.dropzone.getSelectors( + snippet.content, + snippet + ); + snippet.isExcluded = ![...selectorChildren].some((el) => el === hookParentEl); + }); + + // Open the snippet dialog. + let selectedSnippetEl; + await new Promise((resolve) => { + this.snippetModel.openSnippetDialog(snippet, { + onSelect: (snippet) => { + selectedSnippetEl = snippet.content.cloneNode(true); + hookEl.replaceWith(selectedSnippetEl); + return selectedSnippetEl; + }, + onClose: () => { + if (!selectedSnippetEl) { + hookEl.remove(); + } + this.snippetModel.snippetStructures.forEach( + (snippet) => delete snippet.isExcluded + ); + resolve(); + }, + }); + }); + + if (selectedSnippetEl) { + await this.processDroppedSnippet(selectedSnippetEl); + } else { + this.cancelDragAndDrop(); + } + this.state.ongoingInsertion = false; + delete this.cancelDragAndDrop; + } + + showSnippetTooltip(ev) { + const snippetEl = ev.currentTarget.closest(".o_snippet.o_draggable"); + if (snippetEl) { + this.hideSnippetToolTip?.(); + this.hideSnippetToolTip = this.popover.add(snippetEl, Tooltip, { + tooltip: _t("Drag and drop the building block"), + }); + setTimeout(this.hideSnippetToolTip, 1500); + } + } + + // TODO bounce animation on click if empty editable + + makeSnippetDraggable() { + let dropzoneEls = []; + let dragAndDropResolve; + + let snippet, snippetEl, isSnippetGroup; + + const iframeWindow = + this.document.defaultView !== window ? this.document.defaultView : false; + + const scrollingElement = () => + this.shared.dropzone.getDropRootElement() || + this.editable.querySelector(".o_notebook") || + getScrollingElement(this.document) || + this.editable.querySelector(".o_editable"); + + const dragAndDropOptions = { + ref: { el: this.blockTabRef.el }, + iframeWindow, + cursor: "move", + el: this.blockTabRef.el, + elements: ".o_snippet.o_draggable", + scrollingElement, + handle: ".o_snippet_thumbnail:not(.o_we_ongoing_insertion .o_snippet_thumbnail)", + dropzones: () => dropzoneEls, + helper: ({ element, helperOffset }) => { + snippet = element; + const draggedEl = element.cloneNode(true); + draggedEl + .querySelectorAll( + ".o_snippet_thumbnail_title, .o_snippet_thumbnail_area, .rename-delete-buttons" + ) + .forEach((el) => el.remove()); + draggedEl.style.position = "fixed"; + document.body.append(draggedEl); + // Center the helper on the thumbnail image. + const thumbnailImgEl = element.querySelector(".o_snippet_thumbnail_img"); + helperOffset.x = thumbnailImgEl.offsetWidth / 2; + helperOffset.y = thumbnailImgEl.offsetHeight / 2; + return draggedEl; + }, + onDragStart: ({ element }) => { + this.cancelDragAndDrop = this.shared.history.makeSavePoint(); + this.hideSnippetToolTip?.(); + + this.shared.operation.next( + async () => { + await new Promise((resolve) => (dragAndDropResolve = () => resolve())); + }, + { withLoadingEffect: false } + ); + + this.document.body.classList.add("oe_dropzone_active"); + this.state.ongoingInsertion = true; + + const category = element.closest(".o_snippets_container").id; + const id = element.dataset.id; + snippet = this.snippetModel.getSnippet(category, id); + snippetEl = snippet.content.cloneNode(true); + isSnippetGroup = category === "snippet_groups"; + + // Check if the snippet is inline. Add it temporarily to the + // page to compute its style and get its `display` property. + this.document.body.appendChild(snippetEl); + const snippetStyle = window.getComputedStyle(snippetEl); + const isInlineSnippet = snippetStyle.display.includes("inline"); + snippetEl.remove(); + + // Color-customize the snippet dynamic SVGs with the current + // theme colors. + const dynamicSvgEls = [ + ...snippetEl.querySelectorAll( + 'img[src^="/html_editor/shape/"], img[src^="/web_editor/shape/"]' + ), + ]; + dynamicSvgEls.forEach((dynamicSvgEl) => { + const colorCustomizedURL = new URL( + dynamicSvgEl.getAttribute("src"), + window.location.origin + ); + colorCustomizedURL.searchParams.forEach((value, key) => { + const match = key.match(/^c([1-5])$/); + if (match) { + colorCustomizedURL.searchParams.set( + key, + getCSSVariableValue(`o-color-${match[1]}`) + ); + } + }); + dynamicSvgEl.src = colorCustomizedURL.pathname + colorCustomizedURL.search; + }); + + const selectors = this.shared.dropzone.getSelectors(snippetEl, snippet); + dropzoneEls = this.shared.dropzone.activateDropzones(selectors, { + toInsertInline: isInlineSnippet, + }); + this.onDropzoneStart(); + }, + dropzoneOver: ({ dropzone }) => { + const dropzoneEl = dropzone.el; + if (isSnippetGroup) { + dropzoneEl.classList.add("o_dropzone_highlighted"); + return; + } + dropzoneEl.after(snippetEl); + dropzoneEl.classList.add("invisible"); + this.onDropZoneOver(); + + // Preview the snippet correctly. + // Note: no async previews, in order to not slow down the drag. + this.cancelSnippetPreview = this.shared.history.makeSavePoint(); + this.resources["on_snippet_preview_handlers"]?.forEach((onSnippetPreview) => + onSnippetPreview({ snippetEl }) + ); + }, + dropzoneOut: ({ dropzone }) => { + const dropzoneEl = dropzone.el; + if (isSnippetGroup) { + dropzoneEl.classList.remove("o_dropzone_highlighted"); + return; + } + // Undo the preview + this.cancelSnippetPreview(); + delete this.cancelSnippetPreview; + + snippetEl.remove(); + dropzoneEl.classList.remove("invisible"); + this.onDropZoneOut(); + }, + onDragEnd: async ({ x, y, helper, dropzone }) => { + // Undo the preview if any. + this.cancelSnippetPreview?.(); + + this.document.body.classList.remove("oe_dropzone_active"); + snippetEl.remove(); + let currentDropzoneEl = dropzone && dropzone.el; + + // If the snippet was dropped outside of a dropzone, find the + // dropzone that is the nearest to the dropping point. + if (!currentDropzoneEl) { + const blockTabLeft = this.blockTabRef.el.getBoundingClientRect().left; + if (y > 3 && x + helper.getBoundingClientRect().height < blockTabLeft) { + const closestDropzoneEl = closest(dropzoneEls, { x, y }); + if (closestDropzoneEl) { + currentDropzoneEl = closestDropzoneEl; + } + } else { + this.cancelDragAndDrop(); + } + } + + if (currentDropzoneEl) { + currentDropzoneEl.after(snippetEl); + this.shared.dropzone.removeDropzones(); + + if (!isSnippetGroup) { + await this.processDroppedSnippet(snippetEl); + } else { + this.shared.operation.next( + async () => { + await this.onSnippetGroupDrop(snippet, snippetEl); + }, + { withLoadingEffect: false } + ); + } + } + + this.state.ongoingInsertion = false; + this.onDropZoneStop(); // TODO check if it is the best place. + delete this.cancelSnippetPreview; + if (!isSnippetGroup) { + delete this.cancelDragAndDrop; + } + dragAndDropResolve(); + }, + }; + + this.draggableComponent = useDragAndDrop(dragAndDropOptions); + } + + /** + * + * @param {HTMLElement} snippetEl + */ + async processDroppedSnippet(snippetEl) { + this.updateDroppedSnippet(snippetEl); + await scrollTo(snippetEl, { extraOffset: 50 }); + // Build the snippet. + for (const onSnippetDropped of this.resources["on_snippet_dropped_handlers"] || []) { + const cancel = await onSnippetDropped({ snippetEl }); + // Cancel everything if the resource asked to. + if (cancel) { + this.cancelDragAndDrop?.(); + return; + } + } + this.env.editor.config.updateInvisibleElementsPanel(); + this.shared.disableSnippets.disableUndroppableSnippets(); + this.env.editor.shared.history.addStep(); + } + + /** + * Update the dropped snippet to build & adapt dynamic content right + * after adding it to the DOM. + * + * @param {HTMLElement} snippetEl + */ + updateDroppedSnippet(snippetEl) { + // If the snippet is "drop in only", remove the attributes that make it + // a draggable snippet, so it becomes a simple HTML code. + if (snippetEl.classList.contains("o_snippet_drop_in_only")) { + snippetEl.classList.remove("o_snippet_drop_in_only"); + delete snippetEl.dataset.snippet; + delete snippetEl.dataset.name; + } + } + + /** + * Hooks allowing other modules to react to drop zones being enabled. + */ + onDropzoneStart() {} + onDropZoneOver() {} + onDropZoneOut() {} + onDropZoneStop() {} +} diff --git a/addons/html_builder/static/src/sidebar/block_tab.scss b/addons/html_builder/static/src/sidebar/block_tab.scss new file mode 100644 index 0000000000000..5f5186b038b2b --- /dev/null +++ b/addons/html_builder/static/src/sidebar/block_tab.scss @@ -0,0 +1,170 @@ +// TODO define these variables elsewhere. +$o-we-overlay-zindex: ($zindex-fixed + $zindex-modal-backdrop) / 2 !default; +$o-we-zindex: $o-we-overlay-zindex + 1 !default; + +.o_snippet { + // No root because can be dragged and dropped and the helper is in the body. + position: relative; + z-index: $o-we-zindex; + width: 77px; + background-color: $o-we-sidebar-blocks-content-snippet-bg; + + &.o_draggable_dragging { + transform: rotate(-3deg) scale(1.2); + box-shadow: 0 5px 25px -10px black; + transition: transform 0.3s, box-shadow 0.3s; + } + + .o_snippet_thumbnail { + width: 100%; + overflow: hidden; + + .o_snippet_thumbnail_img { + width: 100%; + padding-top: 75%; + background-repeat: no-repeat; + background-size: contain; + background-position: top center; + overflow: hidden; + } + } + + &:not(:hover):not(.o_disabled):not(.o_to_install) { + background-color: rgba($o-we-sidebar-blocks-content-snippet-bg, .9); + + .o_snippet_thumbnail { + filter: saturate(.7); + opacity: .9; + } + } +} + +.o_block_tab { + background-color: $o-we-sidebar-blocks-content-bg; + padding: 0 $o-we-sidebar-blocks-content-spacing; + height: 100%; // give enough space for tips pointing at snippets after a snippet search + z-index: 1; + + + .o_snippets_container, .o_snippets_container_header { + padding: $o-we-sidebar-blocks-content-spacing 0; + } + + .o_snippets_container_body { + display: flex; // Needed for too long snippet names + flex-wrap: wrap; + margin-left: -$o-we-sidebar-blocks-content-snippet-spacing; + + .o_snippet { + flex: 0 0 auto; + width: percentage(1 / 3); + background-clip: padding-box; + border-left: $o-we-sidebar-blocks-content-snippet-spacing solid transparent; + margin-bottom: $o-we-sidebar-blocks-content-snippet-spacing; + user-select: none; + @include o-grab-cursor; + + .o_snippet_thumbnail_title { + @include o-text-overflow(block); + white-space: normal; + padding: $o-we-sidebar-blocks-content-spacing / 2; + text-align: center; + } + + .o_snippet_thumbnail_area { + position: absolute; + inset: 0; + background: transparent; + border: none; + cursor: inherit; + + &:focus-visible { + border: 2px solid $o-brand-primary; + } + } + + &.o_disabled { + pointer-events: initial; + + .o_snippet_undroppable { + @include o-position-absolute(8px, 6px, auto, auto); + } + } + + &.o_to_install { + .o_install_btn { + @include o-position-absolute($top: 10px); + z-index: 1; + } + } + + &.o_disabled, &.o_to_install { + cursor: default; + background-color: rgba($o-we-sidebar-blocks-content-snippet-bg, .2); + + .o_snippet_thumbnail_img { + opacity: .4; + filter: saturate(0) blur(1px); + } + } + } + } + + #snippet_custom_content .o_snippet { + display: flex; + width: 100%; + + .o_snippet_thumbnail, + .rename-delete-buttons { + display: flex; + align-items: center; + } + + .o_snippet_thumbnail { + min-width: 0; // Ensure text-overflow on flex children + } + + .o_snippet_thumbnail_title { + white-space: nowrap; + } + + .o_snippet_thumbnail_img { + flex-shrink: 0; + width: 41px; + height: 30px; // 82x60 -> 41x30 + padding: 0; + } + + // TODO improve the following rules later + .rename-delete-buttons button { + // @extend %we-generic-link; + padding-left: $o-we-sidebar-content-field-button-group-button-spacing; + padding-right: $o-we-sidebar-content-field-button-group-button-spacing; + } + + &:not(:hover, :focus-within), &.o_disabled:hover { + .rename-delete-buttons button { + display: none; + } + } + + .rename-input { + // @extend %we-generic-text-input; + display: flex; + cursor: pointer; + + input { + cursor: text; + } + + button { + // @extend %we-generic-clickable; + cursor: pointer; + flex: 1 1 auto; + padding: 0 $o-we-sidebar-content-field-button-group-button-spacing; + line-height: 17px; + text-align: center; + } + } + } +} diff --git a/addons/html_builder/static/src/sidebar/block_tab.xml b/addons/html_builder/static/src/sidebar/block_tab.xml new file mode 100644 index 0000000000000..2cd20f359361c --- /dev/null +++ b/addons/html_builder/static/src/sidebar/block_tab.xml @@ -0,0 +1,50 @@ + + + + + No block of this category can be dropped on this page. + This block cannot be dropped anywhere on this page. +
+
+
Categories
+
+ + + +
+
+ + +
+
Custom Inner Content
+
+ + + +
+
+ + +
+
Inner Content
+
+ + + +
+
+
+ + + diff --git a/addons/html_builder/static/src/sidebar/custom_inner_snippet.js b/addons/html_builder/static/src/sidebar/custom_inner_snippet.js new file mode 100644 index 0000000000000..a3d48d2e04c2f --- /dev/null +++ b/addons/html_builder/static/src/sidebar/custom_inner_snippet.js @@ -0,0 +1,32 @@ +import { Component, useState, useRef } from "@odoo/owl"; +import { useAutofocus } from "@web/core/utils/hooks"; + +export class CustomInnerSnippet extends Component { + static template = "html_builder.CustomInnerSnippet"; + static props = { + snippetModel: { type: Object }, + snippet: { type: Object }, + onClickHandler: { type: Function }, + disabledTooltip: { type: String }, + }; + + setup() { + this.renameInputRef = useRef("rename-input"); + useAutofocus({ refName: "rename-input" }); + + this.state = useState({ isRenaming: false }); + } + + get snippet() { + return this.props.snippet; + } + + toggleRenamingState() { + this.state.isRenaming = !this.state.isRenaming; + } + + onConfirmRename() { + this.props.snippetModel.renameCustomSnippet(this.snippet, this.renameInputRef.el.value); + this.toggleRenamingState(); + } +} diff --git a/addons/html_builder/static/src/sidebar/custom_inner_snippet.xml b/addons/html_builder/static/src/sidebar/custom_inner_snippet.xml new file mode 100644 index 0000000000000..994f4ae1f7e62 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/custom_inner_snippet.xml @@ -0,0 +1,41 @@ + + + + + This block cannot be dropped anywhere on this page. +
+
+
+ + + + +
+
+
+
+ + + diff --git a/addons/html_builder/static/src/sidebar/customize_component.js b/addons/html_builder/static/src/sidebar/customize_component.js new file mode 100644 index 0000000000000..2ab50fdf385f2 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/customize_component.js @@ -0,0 +1,17 @@ +import { Component } from "@odoo/owl"; +import { useOptionsSubEnv } from "@html_builder/utils/utils"; +import { Img } from "@html_builder/core/img"; + +export class CustomizeComponent extends Component { + static template = "html_builder.CustomizeComponent"; + static components = { Img }; + static props = { + editingElements: { type: Array }, + comp: { type: Function }, + compProps: { type: Object }, + }; + + setup() { + useOptionsSubEnv(() => this.props.editingElements); + } +} diff --git a/addons/html_builder/static/src/sidebar/customize_component.xml b/addons/html_builder/static/src/sidebar/customize_component.xml new file mode 100644 index 0000000000000..21f95ce173d9c --- /dev/null +++ b/addons/html_builder/static/src/sidebar/customize_component.xml @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/addons/html_builder/static/src/sidebar/customize_tab.js b/addons/html_builder/static/src/sidebar/customize_tab.js new file mode 100644 index 0000000000000..872b59bf93741 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/customize_tab.js @@ -0,0 +1,36 @@ +import { Component, useState } from "@odoo/owl"; +import { OptionsContainer } from "./option_container"; +import { useVisibilityObserver } from "../core/utils"; +import { CustomizeComponent } from "@html_builder/sidebar/customize_component"; + +export class CustomizeTab extends Component { + static template = "html_builder.CustomizeTab"; + static components = { CustomizeComponent, OptionsContainer }; + static props = { + currentOptionsContainers: { type: Array, optional: true }, + snippetModel: { type: Object }, + }; + static defaultProps = { + currentOptionsContainers: [], + }; + + setup() { + this.state = useState({ + hasContent: true, + }); + this.customizeComponent = useState( + this.env.editor.shared.customizeTab.getCustomizeComponent() + ); + useVisibilityObserver("content", (hasContent) => { + this.state.hasContent = hasContent; + }); + } + + getCurrentOptionsContainers() { + const currentOptionsContainers = this.props.currentOptionsContainers; + if (!currentOptionsContainers.length) { + return this.env.editor.shared["builder-options"].getPageContainers(); + } + return currentOptionsContainers; + } +} diff --git a/addons/html_builder/static/src/sidebar/customize_tab.xml b/addons/html_builder/static/src/sidebar/customize_tab.xml new file mode 100644 index 0000000000000..d022e2c7893c8 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/customize_tab.xml @@ -0,0 +1,36 @@ + + + + +
+ + +
+ Select a block on your page to style it. +
+ + +
+ + + + +
+ +
+ + + diff --git a/addons/html_builder/static/src/sidebar/invisible_elements.inside.scss b/addons/html_builder/static/src/sidebar/invisible_elements.inside.scss new file mode 100644 index 0000000000000..7638292955952 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/invisible_elements.inside.scss @@ -0,0 +1,37 @@ +.o_snippet_override_invisible { + display: block !important; + opacity: 70%; + position: relative; + + &.d-lg-flex, &.d-md-flex, &.o_half_screen_height, &.o_full_screen_height { + // e.g. Useful if "Height" option (50% or 100%) is enabled. + display: flex !important; + } + + &::before { + position: absolute; + // Content is 0px wide => use available width. + width: -webkit-fill-available; + width: -moz-available; + right: 20px; + z-index: 100; + background-color: $o-we-accent; + font-size: 0px; + pointer-events: none; + content: "."; // Content is mandatory. + } + + &.d-md-none::before, &.d-lg-none::before { + height: 50px; + -webkit-mask: url("/html_builder/static/img/options/desktop_invisible.svg") no-repeat 100% 100%; + } + + &:not(.d-md-none):not(.d-lg-none)::before { + height: 30px; + -webkit-mask: url("/html_builder/static/img/options/mobile_invisible.svg") no-repeat 100% 100%; + } +} + +.o_conditional_hidden { + display: none !important; +} diff --git a/addons/html_builder/static/src/sidebar/invisible_elements_panel.js b/addons/html_builder/static/src/sidebar/invisible_elements_panel.js new file mode 100644 index 0000000000000..46e811ebaf803 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/invisible_elements_panel.js @@ -0,0 +1,107 @@ +import { Component, onWillStart, onWillUpdateProps, useState } from "@odoo/owl"; +import { getSnippetName } from "@html_builder/utils/utils"; + +export class InvisibleElementsPanel extends Component { + static template = "html_builder.InvisibleElementsPanel"; + static props = { + invisibleEls: { type: Array }, + invisibleSelector: { type: String }, + }; + + setup() { + this.state = useState({ invisibleEntries: null }); + + onWillStart(() => this.updateInvisibleElementsPanel(this.props.invisibleEls)); + + onWillUpdateProps((nextProps) => { + this.updateInvisibleElementsPanel(nextProps["invisibleEls"]); + }); + } + + get shared() { + return this.env.editor.shared; + } + + updateInvisibleElementsPanel(invisibleEls) { + // descendantPerSnippet: a map with its keys set to invisible + // snippets that have invisible descendants. The value corresponding + // to an invisible snippet element is a list filled with all its + // descendant invisible snippets except those that have a closer + // invisible snippet ancestor. + const descendantPerSnippet = new Map(); + // Filter the invisibleEls to only keep the root snippets + // and create the map ("descendantPerSnippet") of the snippets and + // their descendant snippets. + const rootInvisibleSnippetEls = invisibleEls.filter((invisibleSnippetEl) => { + const ancestorInvisibleEl = invisibleSnippetEl.parentElement.closest( + this.props.invisibleSelector + ); + if (!ancestorInvisibleEl) { + return true; + } + const descendantSnippets = descendantPerSnippet.get(ancestorInvisibleEl) || []; + descendantPerSnippet.set(ancestorInvisibleEl, [ + ...descendantSnippets, + invisibleSnippetEl, + ]); + return false; + }); + // Insert all the invisible snippets contained in "snippetEls" as + // well as their descendants in the "parentEl" element. If + // "snippetEls" is set to "rootInvisibleSnippetEls" and "parentEl" + // is set to "$invisibleDOMPanelEl[0]", then fills the right + // invisible panel like this: + // rootInvisibleSnippet + // └ descendantInvisibleSnippet + // └ descendantOfDescendantInvisibleSnippet + // └ etc... + const createInvisibleEntries = (snippetEls, isDescendant) => + snippetEls.map((snippetEl) => { + const descendantSnippetEls = descendantPerSnippet.get(snippetEl); + // An element is considered as "RootParent" if it has one or + // more invisible descendants but is not a descendant. + const invisibleElement = { + snippetEl: snippetEl, + name: getSnippetName(snippetEl), + isRootParent: !isDescendant && !!descendantSnippetEls, + isDescendant, + isVisible: snippetEl.dataset.invisible !== "1", + children: [], + }; + if (descendantSnippetEls) { + invisibleElement.children = createInvisibleEntries(descendantSnippetEls, true); + } + return invisibleElement; + }); + this.state.invisibleEntries = createInvisibleEntries(rootInvisibleSnippetEls, false); + } + + toggleElementVisibility(invisibleEntry) { + const toggleVisibility = (snippetEl) => { + const show = this.shared.visibility.toggleTargetVisibility(snippetEl); + invisibleEntry.isVisible = show; + + this.shared.disableSnippets.disableUndroppableSnippets(); + if (show) { + this.shared["builder-options"].updateContainers(snippetEl); + } else { + this.shared["builder-options"].deactivateContainers(); + } + }; + + // When toggling the visibility of an element to "Hide", also toggle all + // its descendants. + if (invisibleEntry.isVisible) { + invisibleEntry.children.forEach((child) => { + if (child.isVisible) { + this.toggleElementVisibility(child); + } + }); + } else if (invisibleEntry.parents && !invisibleEntry.parents.isVisible) { + // When toggling the visibility of an element to "Show", also toggle + // all its parents. + this.toggleElementVisibility(invisibleEntry.parents); + } + toggleVisibility(invisibleEntry.snippetEl); + } +} diff --git a/addons/html_builder/static/src/sidebar/invisible_elements_panel.xml b/addons/html_builder/static/src/sidebar/invisible_elements_panel.xml new file mode 100644 index 0000000000000..e0dce251425f4 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/invisible_elements_panel.xml @@ -0,0 +1,32 @@ + + + + + +
+
+ Invisible Elements +
+ + + +
+ + + +
+
+ +
+
    + +
  • + +
    • +     +
+ + + diff --git a/addons/html_builder/static/src/sidebar/option_container.js b/addons/html_builder/static/src/sidebar/option_container.js new file mode 100644 index 0000000000000..ab41f2509b911 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/option_container.js @@ -0,0 +1,142 @@ +import { BorderConfigurator } from "@html_builder/plugins/border_configurator_option"; +import { ShadowOption } from "@html_builder/plugins/shadow_option"; +import { getSnippetName, useOptionsSubEnv } from "@html_builder/utils/utils"; +import { onWillStart, onWillUpdateProps, useState } from "@odoo/owl"; +import { user } from "@web/core/user"; +import { useService } from "@web/core/utils/hooks"; +import { useOperation } from "../core/operation_plugin"; +import { + BaseOptionComponent, + useApplyVisibility, + useGetItemValue, + useVisibilityObserver, +} from "../core/utils"; + +export class OptionsContainer extends BaseOptionComponent { + static template = "html_builder.OptionsContainer"; + static components = { + BorderConfigurator, + ShadowOption, + }; + static props = { + snippetModel: { type: Object }, + options: { type: Array }, + editingElement: true, // HTMLElement from iframe + isRemovable: false, + removeDisabledReason: { type: String, optional: true }, + isClonable: false, + cloneDisabledReason: { type: String, optional: true }, + containerTopButtons: { type: Array }, + containerTitle: { type: Object, optional: true }, + headerMiddleButtons: { type: Array, optional: true }, + }; + static defaultProps = { + containerTitle: {}, + headerMiddleButtons: [], + }; + + setup() { + useOptionsSubEnv(() => [this.props.editingElement]); + super.setup(); + this.notification = useService("notification"); + this.getItemValue = useGetItemValue(); + useVisibilityObserver("content", useApplyVisibility("root")); + + this.callOperation = useOperation(); + this.state = useState({ + isUpToDate: this.env.editor.shared.versionControl.hasAccessToOutdatedEl( + this.props.editingElement + ), + }); + + this.hasGroup = {}; + onWillStart(async () => { + await this.updateAccessGroup(this.props.options); + }); + onWillUpdateProps(async (nextProps) => { + await this.updateAccessGroup(nextProps.options); + }); + } + + async updateAccessGroup(options) { + const proms = []; + const groups = [...new Set(options.flatMap((o) => o.groups || []))]; + for (const group of groups) { + proms.push( + user.hasGroup(group).then((result) => { + this.hasGroup[group] = result; + }) + ); + } + await Promise.all(proms); + } + + hasAccess(groups) { + if (!groups) { + return true; + } + return groups.every((group) => this.hasGroup[group]); + } + + get title() { + let title; + for (const option of this.props.options) { + title = option.title || title; + } + const titleExtraInfo = this.props.containerTitle.getTitleExtraInfo + ? this.props.containerTitle.getTitleExtraInfo(this.props.editingElement) + : ""; + + return (title || getSnippetName(this.env.getEditingElement())) + titleExtraInfo; + } + + selectElement() { + this.env.editor.shared["builder-options"].updateContainers(this.props.editingElement); + } + + toggleOverlayPreview(el, show) { + if (show) { + this.env.editor.shared.overlayButtons.hideOverlayButtons(); + this.env.editor.shared.builderOverlay.showOverlayPreview(el); + } else { + this.env.editor.shared.overlayButtons.showOverlayButtons(); + this.env.editor.shared.builderOverlay.hideOverlayPreview(el); + } + } + + onMouseEnter() { + this.toggleOverlayPreview(this.props.editingElement, true); + } + + onMouseLeave() { + this.toggleOverlayPreview(this.props.editingElement, false); + } + + // Actions of the buttons in the title bar. + removeElement() { + this.callOperation(() => { + this.env.editor.shared.remove.removeElementAndUpdateContainers( + this.props.editingElement + ); + }); + } + + cloneElement() { + this.callOperation(() => { + this.env.editor.shared.clone.cloneElement(this.props.editingElement, { + scrollToClone: true, + }); + }); + } + + // Version control + replaceElementWithNewVersion() { + this.callOperation(() => { + this.env.editor.shared.versionControl.replaceWithNewVersion(this.props.editingElement); + }); + } + accessOutdated() { + this.env.editor.shared.versionControl.giveAccessToOutdatedEl(this.props.editingElement); + this.state.isUpToDate = true; + } +} diff --git a/addons/html_builder/static/src/sidebar/option_container.scss b/addons/html_builder/static/src/sidebar/option_container.scss new file mode 100644 index 0000000000000..793861fb7534e --- /dev/null +++ b/addons/html_builder/static/src/sidebar/option_container.scss @@ -0,0 +1,65 @@ +.options-container { + .btn { + color: $o-we-fg-light; + font-size: 12px; + padding: 1px 6px; + border: none; + + &.active { + color: $o-we-fg-lighter; + background-color: $o-we-bg-light !important; + + } + + &>img { + padding-bottom: 2px; + } + } + + .btn-primary { + background-color: $o-we-bg-lightest !important; + } + + .btn-primary.o_we_bg_danger { + color: white; + background-color: #e6586c !important; + } + + .btn-primary.o_we_bg_success { + color: white; + background-color: #40ad67 !important; + } + + .we-bg-options-container { + > div { + margin-top: 1px; + margin-bottom: 1px; + } + } + + div:has(> input):not(table.o_social_media_list div) { + width: 60px; + } + div:has(> input.o_we_large) { + width: 100%; + } + table.o_social_media_list button { + width: 2em; + } + + input { + border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color; + border-radius: $o-we-sidebar-content-field-border-radius; + background-color: $o-we-sidebar-content-field-input-bg; + color: inherit; + padding: 0 $o-we-sidebar-content-field-clickable-spacing; + + &:focus { + border-color: $o-we-sidebar-content-field-input-border-color; + } + } +} + +.o_we_img_animate:hover img { + content: image-set(var(--animate-src)); +} diff --git a/addons/html_builder/static/src/sidebar/option_container.xml b/addons/html_builder/static/src/sidebar/option_container.xml new file mode 100644 index 0000000000000..c83bd166ebfc2 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/option_container.xml @@ -0,0 +1,72 @@ + + + + +
+
+ + + +
+
+ + + + + + +
+ +
+
+ +
+ + + + + + +
+ + +
+
This block is outdated.
+
You might not be able to customize it anymore.
+ +
You can still access the block options but it might be ineffective.
+ +
+ +
+ + + diff --git a/addons/html_builder/static/src/sidebar/snippet.js b/addons/html_builder/static/src/sidebar/snippet.js new file mode 100644 index 0000000000000..565892da9828b --- /dev/null +++ b/addons/html_builder/static/src/sidebar/snippet.js @@ -0,0 +1,25 @@ +import { Img } from "@html_builder/core/img"; +import { Component } from "@odoo/owl"; + +export class Snippet extends Component { + static template = "html_builder.Snippet"; + static components = { Img }; + static props = { + snippetModel: { type: Object }, + snippet: { type: Object }, + onClickHandler: { type: Function }, + disabledTooltip: { type: String }, + }; + + get snippet() { + return this.props.snippet; + } + + onInstallableHover(ev) { + if (this.snippet.isInstallable) { + ev.currentTarget + .querySelector(".o_install_btn") + .classList.toggle("visually-hidden-focusable", ev.type !== "mouseover"); + } + } +} diff --git a/addons/html_builder/static/src/sidebar/snippet.xml b/addons/html_builder/static/src/sidebar/snippet.xml new file mode 100644 index 0000000000000..a13bbce98b9c8 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/snippet.xml @@ -0,0 +1,23 @@ + + + + +
+
+ +
+
+ + + diff --git a/addons/html_builder/static/src/snippets/add_snippet_dialog.js b/addons/html_builder/static/src/snippets/add_snippet_dialog.js new file mode 100644 index 0000000000000..c430e0e4adc8a --- /dev/null +++ b/addons/html_builder/static/src/snippets/add_snippet_dialog.js @@ -0,0 +1,82 @@ +import { Component, onMounted, onWillUnmount, onWillRender, useRef, useState } from "@odoo/owl"; +import { loadBundle } from "@web/core/assets"; +import { isBrowserFirefox } from "@web/core/browser/feature_detection"; +import { Dialog } from "@web/core/dialog/dialog"; +import { localization } from "@web/core/l10n/localization"; +import { SnippetViewer } from "./snippet_viewer"; + +export class AddSnippetDialog extends Component { + static template = "html_builder.AddSnippetDialog"; + static components = { Dialog }; + static props = { + selectedSnippet: { type: Object }, + selectSnippet: { type: Function }, + snippetModel: { type: Object }, + close: { type: Function }, + }; + + setup() { + this.iframeRef = useRef("iframe"); + + this.state = useState({ + search: "", + groupSelected: this.props.selectedSnippet.groupName, + showIframe: false, + }); + this.snippetViewerProps = { + state: this.state, + selectSnippet: (...args) => { + this.props.selectSnippet(...args); + this.props.close(); + }, + snippetModel: this.props.snippetModel, + }; + + let root; + onMounted(async () => { + const isFirefox = isBrowserFirefox(); + if (isFirefox) { + // Make sure empty preview iframe is loaded. + // This event is never triggered on Chrome. + await new Promise((resolve) => { + this.iframeRef.el.addEventListener("load", resolve, { once: true }); + }); + } + + const iframeDocument = this.iframeRef.el.contentDocument; + iframeDocument.body.parentElement.classList.add("o_add_snippets_preview"); + iframeDocument.body.style.setProperty("direction", localization.direction); + + root = this.__owl__.app.createRoot(SnippetViewer, { + props: this.snippetViewerProps, + }); + root.mount(iframeDocument.body); + + await loadBundle("html_builder.iframe_add_dialog", { + targetDoc: iframeDocument, + js: false, + }); + this.state.showIframe = true; + }); + + onWillRender(() => { + if (!this.props.snippetModel.hasCustomGroup && this.state.groupSelected === "custom") { + this.state.groupSelected = this.props.snippetModel.snippetGroups[0].groupName; + } + }); + + onWillUnmount(() => { + root.destroy(); + }); + } + + get snippetGroups() { + return this.props.snippetModel.snippetGroups.filter( + (snippetGroup) => !snippetGroup.moduleId + ); + } + + selectGroup(snippetGroup) { + this.state.groupSelected = snippetGroup.groupName; + } +} diff --git a/addons/html_builder/static/src/snippets/add_snippet_dialog.scss b/addons/html_builder/static/src/snippets/add_snippet_dialog.scss new file mode 100644 index 0000000000000..c652cd279de4f --- /dev/null +++ b/addons/html_builder/static/src/snippets/add_snippet_dialog.scss @@ -0,0 +1,40 @@ +.o_add_snippet_dialog { + max-height: $modal-lg !important; + + .modal-body { + display: flex; + padding: 0; + + aside { + input[type="search"] { + // Chromium-based browsers render a "cancel" button by default. + // When visible, adapt its position in order to visually + // "replace" the magnify icon. + &::-webkit-search-cancel-button { + transform: translateX(map-get($spacers, 3)); + } + + &:not(:placeholder-shown) + .input-group-text { + display: none; + + // Preserve Firefox from chromium adaptations + @media screen and (min--moz-device-pixel-ratio:0) { + display: block; + } + } + } + } + + .list-group { + --list-group-border-radius: 0; + + min-width: 200px; + max-width: 250px; + + button.active { + background-color: $o-brand-primary; + border-color: $o-brand-primary; + } + } + } +} diff --git a/addons/html_builder/static/src/snippets/add_snippet_dialog.xml b/addons/html_builder/static/src/snippets/add_snippet_dialog.xml new file mode 100644 index 0000000000000..39d2c1d680c5e --- /dev/null +++ b/addons/html_builder/static/src/snippets/add_snippet_dialog.xml @@ -0,0 +1,41 @@ + + + + + +
+
+ +
+ + +
+
+ `); + expect(".modal-content").toHaveCount(0); + await dblclick(":iframe iframe"); + await animationFrame(); + expect(".modal-content:contains(Select a media) .o_video_dialog_form").toHaveCount(1); +}); diff --git a/addons/html_editor/static/src/main/media/media_dialog/video_selector.js b/addons/html_editor/static/src/main/media/media_dialog/video_selector.js index 606c9e236ea5c..d11622940cba0 100644 --- a/addons/html_editor/static/src/main/media/media_dialog/video_selector.js +++ b/addons/html_editor/static/src/main/media/media_dialog/video_selector.js @@ -37,7 +37,7 @@ export class VideoSelector extends Component { errorMessages: Function, vimeoPreviewIds: { type: Array, optional: true }, isForBgVideo: { type: Boolean, optional: true }, - media: { type: Object, optional: true }, + media: { validate: (p) => p.nodeType === Node.ELEMENT_NODE, optional: true }, "*": true, }; static defaultProps = { From 40c995faa7bfe4493a29565713ff50ec55cb4344 Mon Sep 17 00:00:00 2001 From: "Robin Lejeune (role)" Date: Mon, 5 May 2025 15:21:33 +0200 Subject: [PATCH 094/240] [FIX] html_builder: improve Edit click feedback + hotkeys in iframe - the admin navbar is only hidden right before the sidebar appears - meanwhile, the Edit button shows a loading spinner between the click and the sidebar opening - Press Escape to toggle the admin navbar and the sidebar - Ctrl + K doesn't focus the browser URL field but opens Odoo search box - F5 or Ctrl + R while in backend stay in backend --- .../edit_website_systray_item.js | 3 +- .../edit_website_systray_item.xml | 13 ++- .../website_preview/website_builder_action.js | 83 +++++++++++++++++-- .../website_builder_action.scss | 19 ++++- .../website_builder_action.xml | 2 +- .../static/tests/translation.test.js | 2 + .../static/tests/website_helpers.js | 8 +- .../website/static/src/js/tours/tour_utils.js | 2 +- .../website_sale_restricted_editor_ui.js | 2 +- 9 files changed, 113 insertions(+), 21 deletions(-) diff --git a/addons/html_builder/static/src/website_preview/edit_website_systray_item.js b/addons/html_builder/static/src/website_preview/edit_website_systray_item.js index c20f93c5e7704..49337d3e7932c 100644 --- a/addons/html_builder/static/src/website_preview/edit_website_systray_item.js +++ b/addons/html_builder/static/src/website_preview/edit_website_systray_item.js @@ -1,4 +1,4 @@ -import { Component } from "@odoo/owl"; +import { Component, useState } from "@odoo/owl"; import { useService } from "@web/core/utils/hooks"; import { Dropdown } from "@web/core/dropdown/dropdown"; import { DropdownItem } from "@web/core/dropdown/dropdown_item"; @@ -18,6 +18,7 @@ export class EditWebsiteSystrayItem extends Component { setup() { this.websiteService = useService("website"); + this.websiteContext = useState(this.websiteService.context); } onClickEditPage() { diff --git a/addons/html_builder/static/src/website_preview/edit_website_systray_item.xml b/addons/html_builder/static/src/website_preview/edit_website_systray_item.xml index ca9136527da01..df7066a1ba527 100644 --- a/addons/html_builder/static/src/website_preview/edit_website_systray_item.xml +++ b/addons/html_builder/static/src/website_preview/edit_website_systray_item.xml @@ -2,9 +2,18 @@ - Edit + - + diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.js b/addons/html_builder/static/src/website_preview/website_builder_action.js index f8dda38165ac6..634f0ac89f97a 100644 --- a/addons/html_builder/static/src/website_preview/website_builder_action.js +++ b/addons/html_builder/static/src/website_preview/website_builder_action.js @@ -4,12 +4,14 @@ import { onMounted, onWillDestroy, onWillStart, + useEffect, useRef, useState, useSubEnv, } from "@odoo/owl"; import { LazyComponent, loadBundle } from "@web/core/assets"; import { browser } from "@web/core/browser/browser"; +import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service"; import { _t } from "@web/core/l10n/translation"; import { registry } from "@web/core/registry"; import { ResizablePanel } from "@web/core/resizable_panel/resizable_panel"; @@ -17,6 +19,7 @@ import { Deferred } from "@web/core/utils/concurrency"; import { uniqueId } from "@web/core/utils/functions"; import { useChildRef, useService } from "@web/core/utils/hooks"; import { effect } from "@web/core/utils/reactive"; +import { redirect } from "@web/core/utils/urls"; import { standardActionServiceProps } from "@web/webclient/actions/action_service"; import { AddPageDialog } from "@website/components/dialog/add_page_dialog"; import { ResourceEditor } from "@website/components/resource_editor/resource_editor"; @@ -36,6 +39,7 @@ export class WebsiteBuilder extends Component { this.websiteService = useService("website"); this.ui = useService("ui"); this.title = useService("title"); + this.hotkeyService = useService("hotkey"); this.websiteService.websiteRootInstance = undefined; this.websiteContent = useRef("iframe"); @@ -44,6 +48,9 @@ export class WebsiteBuilder extends Component { }); this.state = useState({ isEditing: false, key: 1 }); this.websiteContext = useState(this.websiteService.context); + + this.onKeydownRefresh = this._onKeydownRefresh.bind(this); + onMounted(() => { // You can't wait for rendering because the Builder depends on the page style synchronously. effect( @@ -94,6 +101,7 @@ export class WebsiteBuilder extends Component { } }); onMounted(() => { + this.addListeners(document); this.addSystrayItems(); this.websiteService.useMysterious = true; const { enable_editor, edit_translations } = this.props.action.context.params || {}; @@ -109,6 +117,27 @@ export class WebsiteBuilder extends Component { this.websiteService.useMysterious = false; this.websiteService.currentWebsiteId = null; }); + + effect( + (state) => { + this.websiteContext.edition = state.isEditing; + if (!state.isEditing) { + this.addSystrayItems(); + } + }, + [this.state] + ); + useEffect( + (isEditing) => { + document.querySelector("body").classList.toggle("o_builder_open", isEditing); + if (isEditing) { + setTimeout(() => { + registry.category("systray").remove("website.WebsiteSystrayItem"); + }, 200); + } + }, + () => [this.state.isEditing] + ); } get menuProps() { @@ -157,15 +186,10 @@ export class WebsiteBuilder extends Component { } async onEditPage() { - document.querySelector("body").classList.add("o_builder_open"); await this.iframeLoaded; await this.publicRootReady; await this.loadAssetsEditBundle(); - - setTimeout(() => { - this.state.isEditing = true; - registry.category("systray").remove("website.WebsiteSystrayItem"); - }, 200); + this.state.isEditing = true; } async loadAssetsEditBundle() { @@ -191,7 +215,12 @@ export class WebsiteBuilder extends Component { return; } - if (!isHTTPSorNakedDomainRedirection(iframe.contentWindow.location.origin, window.location.origin)) { + if ( + !isHTTPSorNakedDomainRedirection( + iframe.contentWindow.location.origin, + window.location.origin + ) + ) { // If another domain ends up loading in the iframe (for example, // if the iframe is being redirected and has no initial URL, so it // loads "about:blank"), do not push that into the history @@ -331,9 +360,7 @@ export class WebsiteBuilder extends Component { async reloadIframeAndCloseEditor() { const isEditing = false; await this.reloadIframe(isEditing); - document.querySelector("body").classList.remove("o_builder_open"); this.state.isEditing = isEditing; - this.addSystrayItems(); } async reloadIframe(isEditing = true, url) { @@ -371,6 +398,8 @@ export class WebsiteBuilder extends Component { setIframeLoaded() { this.iframeLoaded = new Promise((resolve) => { this.resolveIframeLoaded = () => { + this.hotkeyService.registerIframe(this.websiteContent.el); + this.addListeners(this.websiteContent.el.contentDocument); resolve(this.websiteContent.el); }; }); @@ -390,6 +419,42 @@ export class WebsiteBuilder extends Component { onResourceEditorResize(width) { browser.localStorage.setItem("ace_editor_width", width); } + + /** + * Handles refreshing while the website preview is active. + * Makes it possible to stay in the backend after an F5 or CTRL-R keypress. + * Cannot be done through the hotkey service due to F5. + * + * @param {KeyboardEvent} ev + */ + _onKeydownRefresh(ev) { + const hotkey = getActiveHotkey(ev); + if (hotkey !== "control+r" && hotkey !== "f5") { + return; + } + // The iframe isn't loaded yet: fallback to default refresh. + if (this.websiteService.contentWindow === undefined) { + return; + } + ev.preventDefault(); + const path = this.websiteService.contentWindow.location; + const debugMode = this.env.debug ? `&debug=${this.env.debug}` : ""; + redirect( + `/odoo/action-website.website_preview?path=${encodeURIComponent(path)}${debugMode}` + ); + } + + /** + * Registers listeners on both the main document and the iframe document. + * It can mostly be done through the hotkey service, but not all keys are + * whitelisted, specifically F5 which we want to override. + * + * @param {HTMLElement} target - document or iframe document + */ + addListeners(target) { + target.removeEventListener("keydown", this.onKeydownRefresh); + target.addEventListener("keydown", this.onKeydownRefresh); + } } function deleteQueryParam(param, target = window, adaptBrowserUrl = false) { diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.scss b/addons/html_builder/static/src/website_preview/website_builder_action.scss index 363bb93561cc0..ab83c64365570 100644 --- a/addons/html_builder/static/src/website_preview/website_builder_action.scss +++ b/addons/html_builder/static/src/website_preview/website_builder_action.scss @@ -5,14 +5,25 @@ &.o_builder_sidebar_open { width: $o-we-sidebar-width; + transition-delay: 200ms; + + .o_website_fullscreen & { + width: 0; + } + } + + .o_builder_open & { + transition-delay: 0ms; } } .o_main_navbar { - transition: margin-top ease 400ms !important; -} -.o_builder_open .o_main_navbar { - margin-top: -$o-navbar-height; + transition: margin-top ease 400ms; + + .o_website_fullscreen &, + .o_builder_open & { + margin-top: -$o-navbar-height; + } } .o_website_preview { diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.xml b/addons/html_builder/static/src/website_preview/website_builder_action.xml index 8ba7078f937ae..ef04ebcb977d4 100644 --- a/addons/html_builder/static/src/website_preview/website_builder_action.xml +++ b/addons/html_builder/static/src/website_preview/website_builder_action.xml @@ -16,7 +16,7 @@
- +
diff --git a/addons/html_builder/static/tests/translation.test.js b/addons/html_builder/static/tests/translation.test.js index d68584ea7ec9d..a41aa29366cee 100644 --- a/addons/html_builder/static/tests/translation.test.js +++ b/addons/html_builder/static/tests/translation.test.js @@ -96,6 +96,7 @@ test("404 page in translate mode", async () => { setup() { websiteServiceInTranslateMode.is404 = () => true; this.websiteService = websiteServiceInTranslateMode; + this.websiteContext = this.websiteService.context; }, }); await setupWebsiteBuilder(`

Homepage

`, { openEditor: false }); @@ -200,6 +201,7 @@ async function setupSidebarBuilderForTranslation(options) { super.setup(); this.env.services.website = websiteServiceInTranslateMode; this.websiteService = websiteServiceInTranslateMode; + this.websiteContext = this.websiteService.context; }, }); patchWithCleanup(WebsiteBuilder.prototype, { diff --git a/addons/html_builder/static/tests/website_helpers.js b/addons/html_builder/static/tests/website_helpers.js index a9d5f130b5e4c..a50c21b8e4b49 100644 --- a/addons/html_builder/static/tests/website_helpers.js +++ b/addons/html_builder/static/tests/website_helpers.js @@ -237,9 +237,13 @@ async function openBuilderSidebar(editAssetsLoaded) { await click(".o-website-btn-custo-primary"); await editAssetsLoaded; - // advanceTime linked to the setTimeout in the WebsiteBuilder component - // tick needed to wait for the timeout to be called before advancing time. + // animationFrame linked to state.isEditing rendering the WebsiteBuilder. + await animationFrame(); + // tick needed to wait for the timeout in the WebsiteBuilder useEffect to be + // called before advancing time. await tick(); + // advanceTime linked to the setTimeout in the WebsiteBuilder component that + // removes the systray items. await advanceTime(200); await animationFrame(); } diff --git a/addons/website/static/src/js/tours/tour_utils.js b/addons/website/static/src/js/tours/tour_utils.js index 4b0e30e74f216..5c1f67837895f 100644 --- a/addons/website/static/src/js/tours/tour_utils.js +++ b/addons/website/static/src/js/tours/tour_utils.js @@ -232,7 +232,7 @@ export function clickOnElement(elementName, selector) { export function clickOnEditAndWaitEditMode(position = "bottom") { return [{ content: markup(_t("Click Edit to start designing your homepage.")), - trigger: "body .o_menu_systray a:contains('Edit')", + trigger: "body .o_menu_systray button:contains('Edit')", tooltipPosition: position, run: "click", }, { diff --git a/addons/website_sale/static/tests/tours/website_sale_restricted_editor_ui.js b/addons/website_sale/static/tests/tours/website_sale_restricted_editor_ui.js index 4b8f3b5916f6b..76701f89236ff 100644 --- a/addons/website_sale/static/tests/tours/website_sale_restricted_editor_ui.js +++ b/addons/website_sale/static/tests/tours/website_sale_restricted_editor_ui.js @@ -18,7 +18,7 @@ registerWebsitePreviewTour('website_sale_restricted_editor_ui', { }, { // Wait for the possibility to edit to appear - trigger: ".o_menu_systray a:contains('Edit')", + trigger: ".o_menu_systray button:contains('Edit')", }, { content: "Ensure the publish and 'edit-in-backend' buttons are not shown", From a0cc545d52b97cc0081c23a5bd7f8d04946b84bd Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Wed, 7 May 2025 16:50:42 +0200 Subject: [PATCH 095/240] [FIX] website: avoid infinite wait for carousel slide operation pre-forward port of 208853 --- .../website/static/src/core/website_edit_service.js | 13 ++++++++++++- .../src/interactions/carousel/carousel_slider.js | 8 +++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/addons/website/static/src/core/website_edit_service.js b/addons/website/static/src/core/website_edit_service.js index b512fbfa13ac5..bb9143e0525f1 100644 --- a/addons/website/static/src/core/website_edit_service.js +++ b/addons/website/static/src/core/website_edit_service.js @@ -122,7 +122,18 @@ registry.category("services").add("website_edit", { return (...args) => historyCallbacks.ignoreDOMMutations(() => fn(...args)); }, addListener(target, event, fn, options) { - fn = fn.bind(this.interaction); + const boundFn = fn.bind(this.interaction); + if (event.startsWith("slide.bs.carousel")) { + // Never allow cancelling this event in edit mode. + fn = (...args) => { + const ev = args[0]; + ev.preventDefault = () => {}; + ev.stopPropagation = () => {}; + return boundFn(...args); + }; + } else { + fn = boundFn; + } let stealth = true; const parts = event.split("."); if (parts.includes("keepInHistory") || options?.keepInHistory) { diff --git a/addons/website/static/src/interactions/carousel/carousel_slider.js b/addons/website/static/src/interactions/carousel/carousel_slider.js index f73f4d34bd62d..7f0f83dbfb78a 100644 --- a/addons/website/static/src/interactions/carousel/carousel_slider.js +++ b/addons/website/static/src/interactions/carousel/carousel_slider.js @@ -98,11 +98,9 @@ export class CarouselSlider extends Interaction { // If images are loading, prevent the slide transition. It will // slide once the next images are loaded. ev.preventDefault(); - onceAllImagesLoaded(this.carouselInnerEl).then( - () => { - window.Carousel.getOrCreateInstance(this.el).to(ev.to); - } - ); + onceAllImagesLoaded(this.carouselInnerEl).then(() => { + window.Carousel.getOrCreateInstance(this.el).to(ev.to); + }); return; } if (this.options.scrollMode === "single") { From 10b9ce62e305efe7cc26e63683abd7a573557f62 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Tue, 6 May 2025 11:53:56 +0200 Subject: [PATCH 096/240] carousel: select first slide on save --- .../static/src/plugins/carousel_option_plugin.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/addons/html_builder/static/src/plugins/carousel_option_plugin.js b/addons/html_builder/static/src/plugins/carousel_option_plugin.js index 2cbbb4abca819..703910da23438 100644 --- a/addons/html_builder/static/src/plugins/carousel_option_plugin.js +++ b/addons/html_builder/static/src/plugins/carousel_option_plugin.js @@ -51,6 +51,17 @@ export class CarouselOptionPlugin extends Plugin { on_snippet_dropped_handlers: this.onSnippetDropped.bind(this), normalize_handlers: this.normalize.bind(this), on_reorder_items_handlers: this.reorderCarouselItems.bind(this), + before_save_handlers: () => { + const proms = []; + for (const carouselEl of this.editable.querySelectorAll(".carousel")) { + const firstItem = carouselEl.querySelector(".carousel-item"); + if (firstItem.classList.contains("active")) { + continue; + } + proms.push(this.slide(carouselEl, 0)); + } + return Promise.all(proms); + }, }; getActions() { From 7d577561fa51825c98fa3d459a7d58e5b0158012 Mon Sep 17 00:00:00 2001 From: Jinjiu Liu Date: Wed, 7 May 2025 09:26:54 +0200 Subject: [PATCH 097/240] remove carousel_section_slider.edit.js, it's already handled in carousel.edit.js --- .../carousel/carousel_section_slider.edit.js | 40 ------------------- 1 file changed, 40 deletions(-) delete mode 100644 addons/website/static/src/interactions/carousel/carousel_section_slider.edit.js diff --git a/addons/website/static/src/interactions/carousel/carousel_section_slider.edit.js b/addons/website/static/src/interactions/carousel/carousel_section_slider.edit.js deleted file mode 100644 index 13853cb5d4fa3..0000000000000 --- a/addons/website/static/src/interactions/carousel/carousel_section_slider.edit.js +++ /dev/null @@ -1,40 +0,0 @@ -import { Interaction } from "@web/public/interaction"; -import { registry } from "@web/core/registry"; - -// TODO: remove this after html_builder is merged, it's already handled in -// carousel.edit.js -export class CarouselSectionSliderEdit extends Interaction { - static selector = "section > .carousel"; - dynamicContent = { - ".carousel-control-prev, .carousel-control-next": { - "t-att-data-bs-slide": () => undefined, - "t-on-mousedown": this.onControlClick, - }, - ".carousel-indicators > *": { - "t-att-data-bs-slide-to": () => undefined, - "t-on-mousedown": this.onControlClick, - }, - }; - - destroy() { - const editTranslations = this.services.website_edit.isEditingTranslations(); - if (!editTranslations) { - // Restore the carousel controls. - const indicatorEls = this.el.querySelectorAll(".carousel-indicators > *"); - indicatorEls.forEach((indicatorEl, i) => indicatorEl.setAttribute("data-bs-slide-to", i)); - } - } - - /** - * Redirects a carousel control click on the active slide. - */ - onControlClick() { - this.el.querySelector(".carousel-item.active").click(); - } -} - -registry - .category("public.interactions.edit") - .add("website.carousel_section_slider", { - Interaction: CarouselSectionSliderEdit, - }); From cb6dc9f81763475eb6ac01956f499e1b3484b89e Mon Sep 17 00:00:00 2001 From: "Augustin (duau)" Date: Thu, 8 May 2025 11:13:18 +0200 Subject: [PATCH 098/240] add withLoadingEffect support in actions move applyAction to builder actions to be able to call it from plugin and pass it to components that can't use service website_edit --- .../static/src/core/builder_actions_plugin.js | 28 ++++++++++++++++- addons/html_builder/static/src/core/utils.js | 31 +++++++++++++++++-- .../static/src/interactions/carousel.edit.js | 3 +- .../plugins/carousel_item_header_buttons.js | 19 ++++++------ .../static/src/plugins/carousel_option.xml | 4 +-- .../src/plugins/carousel_option_plugin.js | 8 ++--- .../static/src/core/website_edit_service.js | 16 +--------- 7 files changed, 73 insertions(+), 36 deletions(-) diff --git a/addons/html_builder/static/src/core/builder_actions_plugin.js b/addons/html_builder/static/src/core/builder_actions_plugin.js index b53dde73ed7a7..90d06f6929a03 100644 --- a/addons/html_builder/static/src/core/builder_actions_plugin.js +++ b/addons/html_builder/static/src/core/builder_actions_plugin.js @@ -11,7 +11,8 @@ import { Plugin } from "@html_editor/plugin"; export class BuilderActionsPlugin extends Plugin { static id = "builderActions"; - static shared = ["getAction"]; + static shared = ["getAction", "applyAction"]; + static dependencies = ["operation", "history"]; setup() { this.actions = {}; @@ -39,4 +40,29 @@ export class BuilderActionsPlugin extends Plugin { } return action; } + + /** + * Apply action for the given action ID. + * + * @param {string} actionId + * @param {Object} spec + */ + applyAction(actionId, spec) { + const action = this.getAction(actionId); + this.dependencies.operation.next( + async () => { + await action.apply(spec); + this.dependencies.history.addStep(); + }, + { + ...action, + load: async () => { + if (action.load) { + const loadResult = await action.load(spec); + spec.loadResult = loadResult; + } + }, + } + ); + } } diff --git a/addons/html_builder/static/src/core/utils.js b/addons/html_builder/static/src/core/utils.js index f22224a9d2cbb..bd1f2ff23daa9 100644 --- a/addons/html_builder/static/src/core/utils.js +++ b/addons/html_builder/static/src/core/utils.js @@ -429,6 +429,22 @@ export function useHasPreview(getAllActions) { ); } +function useWithLoadingEffect(getAllActions) { + const env = useEnv(); + const getAction = env.editor.shared.builderActions.getAction; + let withLoadingEffect = true; + for (const descr of getAllActions()) { + if (descr.actionId) { + const action = getAction(descr.actionId); + if (action.withLoadingEffect === false) { + withLoadingEffect = false; + } + } + } + + return withLoadingEffect; +} + export function useClickableBuilderComponent() { useBuilderComponent(); const comp = useComponent(); @@ -445,12 +461,18 @@ export function useClickableBuilderComponent() { const hasPreview = useHasPreview(getAllActions); const operationWithReload = useOperationWithReload(callApply, reload); + const withLoadingEffect = useWithLoadingEffect(getAllActions); + const operation = { commit: () => { if (reload) { callOperation(operationWithReload); } else { - callOperation(applyOperation.commit); + callOperation(applyOperation.commit, { + operationParams: { + withLoadingEffect: withLoadingEffect, + }, + }); } }, preview: () => { @@ -581,6 +603,8 @@ export function useInputBuilderComponent({ const onReady = usePrepareAction(getAllActions); const { reload } = useReloadAction(getAllActions); + const withLoadingEffect = useWithLoadingEffect(getAllActions); + async function callApply(applySpecs) { const proms = []; for (const applySpec of applySpecs) { @@ -622,7 +646,10 @@ export function useInputBuilderComponent({ if (reload) { callOperation(operationWithReload, { userInputValue: rawValue }); } else { - callOperation(applyOperation.commit, { userInputValue: rawValue }); + callOperation(applyOperation.commit, { + userInputValue: rawValue, + withLoadingEffect: withLoadingEffect, + }); } // If the parsed value is not equivalent to the user input, we want to // normalize the displayed value. It is useful in cases of invalid diff --git a/addons/html_builder/static/src/interactions/carousel.edit.js b/addons/html_builder/static/src/interactions/carousel.edit.js index 79feddccb9ac6..1bba482914652 100644 --- a/addons/html_builder/static/src/interactions/carousel.edit.js +++ b/addons/html_builder/static/src/interactions/carousel.edit.js @@ -46,8 +46,7 @@ export class CarouselEdit extends Interaction { } // Slide the carousel - const editingCarousel = this.el; - const applySpec = { editingElement: editingCarousel, direction: direction }; + const applySpec = { editingElement: this.el, params: { direction: direction } }; if (this.services["website_edit"].applyAction) { this.services["website_edit"].applyAction("slideCarousel", applySpec); diff --git a/addons/html_builder/static/src/plugins/carousel_item_header_buttons.js b/addons/html_builder/static/src/plugins/carousel_item_header_buttons.js index 4343e75f3fc17..81c0b2f735c3f 100644 --- a/addons/html_builder/static/src/plugins/carousel_item_header_buttons.js +++ b/addons/html_builder/static/src/plugins/carousel_item_header_buttons.js @@ -4,7 +4,7 @@ import { Component } from "@odoo/owl"; export class CarouselItemHeaderMiddleButtons extends Component { static template = "html_builder.CarouselItemHeaderMiddleButtons"; static props = { - slideCarousel: Function, + applyAction: Function, addSlide: Function, removeSlide: Function, }; @@ -13,16 +13,15 @@ export class CarouselItemHeaderMiddleButtons extends Component { this.callOperation = useOperation(); } - slidePrev() { - this.callOperation(async () => { - await this.props.slideCarousel("prev", this.env.getEditingElement()); - }); - } + slide(direction) { + const applySpec = { + editingElement: this.env.getEditingElement().closest(".carousel"), + params: { + direction: direction, + }, + }; - slideNext() { - this.callOperation(async () => { - await this.props.slideCarousel("next", this.env.getEditingElement()); - }); + this.props.applyAction("slideCarousel", applySpec); } addSlide() { diff --git a/addons/html_builder/static/src/plugins/carousel_option.xml b/addons/html_builder/static/src/plugins/carousel_option.xml index 7c037f04c7771..f6d36f7e36991 100644 --- a/addons/html_builder/static/src/plugins/carousel_option.xml +++ b/addons/html_builder/static/src/plugins/carousel_option.xml @@ -65,13 +65,13 @@
+ + +
+ +
+
+ +
+ + + +
+
+ + +
+ + + 25 +
+ + + diff --git a/addons/html_builder/static/src/website_payment/donation_option_plugin.js b/addons/html_builder/static/src/website_payment/donation_option_plugin.js new file mode 100644 index 0000000000000..5541fc4e2d531 --- /dev/null +++ b/addons/html_builder/static/src/website_payment/donation_option_plugin.js @@ -0,0 +1,260 @@ +import { SNIPPET_SPECIFIC } from "@html_builder/utils/option_sequence"; +import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; +import { _t } from "@web/core/l10n/translation"; +import { registry } from "@web/core/registry"; +import { renderToElement, renderToFragment } from "@web/core/utils/render"; + +class DonationOptionPlugin extends Plugin { + static id = "DonationOption"; + resources = { + builder_options: [ + withSequence(SNIPPET_SPECIFIC, { + template: "website_payment.DonationOption", + selector: ".s_donation", + // TODO AGAU: remove when merging https://github.com/odoo-dev/odoo/pull/4240 + cleanForSave: this.cleanForSave.bind(this), + }), + ], + builder_actions: { + toggleDisplayOptions: this.makeToggleDataAttributeAction( + "displayOptions", + this.toggleDisplayOptions.bind(this) + ), + togglePrefilledOptions: this.makeToggleDataAttributeAction( + "prefilledOptions", + this.togglePrefilledOptions.bind(this) + ), + toggleDescriptions: this.makeToggleDataAttributeAction( + "descriptions", + this.toggleDescriptions.bind(this) + ), + setPrefilledOptions: { + getValue: this.getPrefilledOptionsList.bind(this), + apply: this.applyPrefilledOptionsList.bind(this), + }, + selectAmountInput: { + isApplied: this.isAmountInputApplied.bind(this), + apply: this.setAmountInput.bind(this), + }, + setMinimumAmount: { + getValue: this.getMinimumAmount.bind(this), + apply: this.setMinimumAmount.bind(this), + }, + setMaximumAmount: { + getValue: this.getMaximumAmount.bind(this), + apply: this.setMaximumAmount.bind(this), + }, + setSliderStep: { + getValue: this.getSliderStep.bind(this), + apply: this.setSliderStep.bind(this), + }, + }, + }; + + makeToggleDataAttributeAction(dataAttributeName, toggleFunction) { + return { + isApplied: ({ editingElement }) => !!editingElement.dataset[dataAttributeName], + apply: (obj, ...restArgs) => { + const { editingElement } = obj; + editingElement.dataset[dataAttributeName] = "true"; + toggleFunction({ ...obj, value: true }, ...restArgs); + }, + clean: (obj, ...restArgs) => { + const { editingElement } = obj; + delete editingElement.dataset[dataAttributeName]; + toggleFunction({ ...obj, value: false }, ...restArgs); + }, + }; + } + + toggleDisplayOptions({ editingElement, value }) { + if (!value && editingElement.dataset.customAmount === "slider") { + editingElement.dataset.customAmount = "freeAmount"; + } else if (value && !editingElement.dataset.prefilledOptions) { + editingElement.dataset.customAmount = "slider"; + } + this.rebuildPrefilledOptions(editingElement); + } + + togglePrefilledOptions({ editingElement, value }) { + if (!value && editingElement.dataset.displayOptions) { + editingElement.dataset.customAmount = "slider"; + } + this.rebuildPrefilledOptions(editingElement); + } + + toggleDescriptions({ editingElement }) { + this.rebuildPrefilledOptions(editingElement); + } + + getPrefilledOptionsList({ editingElement }) { + const savedOptions = editingElement.dataset.prefilledOptionsList; + + // TODO AGAU: remove when merging https://github.com/odoo-dev/odoo/pull/4240 + { + if (savedOptions) { + return savedOptions; + } else { + const options = []; + const amounts = JSON.parse(editingElement.dataset.donationAmounts || "[]"); + const descriptionEls = editingElement.querySelectorAll( + "#s_donation_description_inputs input" + ); + const descriptions = Array.from(descriptionEls).map( + (descriptionEl) => descriptionEl.value + ); + for (let i = 0; i < amounts.length; i++) { + options.push({ + value: amounts[i], + description: + typeof descriptions[i] === "string" + ? descriptions[i] + : _t("Add a description here"), + }); + } + return JSON.stringify(options); + } + } + + // TODO AGAU: uncomment when merging https://github.com/odoo-dev/odoo/pull/4240 + // return savedOptions || "[]"; + } + + applyPrefilledOptionsList({ editingElement, value }) { + // TODO AGAU: remove when merging https://github.com/odoo-dev/odoo/pull/4240 + { + const options = JSON.parse(value); + const amounts = options.map((option) => option.value); + editingElement.dataset.donationAmounts = JSON.stringify(amounts); + } + + editingElement.dataset.prefilledOptionsList = value; + this.rebuildPrefilledOptions(editingElement, value); + } + + isAmountInputApplied({ editingElement, params }) { + return editingElement.dataset.customAmount === params.mainParam; + } + + setAmountInput({ editingElement, params }) { + editingElement.dataset.customAmount = params.mainParam; + this.rebuildPrefilledOptions(editingElement); + } + + getMinimumAmount({ editingElement }) { + return editingElement.dataset.minimumAmount; + } + + setMinimumAmount({ editingElement, value }) { + editingElement.dataset.minimumAmount = value; + const rangeSliderEl = editingElement.querySelector("#s_donation_range_slider"); + const amountInputEl = editingElement.querySelector("#s_donation_amount_input"); + if (rangeSliderEl) { + rangeSliderEl.min = value; + } else if (amountInputEl) { + amountInputEl.min = value; + } + } + + getMaximumAmount({ editingElement }) { + return editingElement.dataset.maximumAmount; + } + + setMaximumAmount({ editingElement, value }) { + editingElement.dataset.maximumAmount = value; + const rangeSliderEl = editingElement.querySelector("#s_donation_range_slider"); + const amountInputEl = editingElement.querySelector("#s_donation_amount_input"); + if (rangeSliderEl) { + rangeSliderEl.max = value; + } else if (amountInputEl) { + amountInputEl.max = value; + } + } + + getSliderStep({ editingElement }) { + return editingElement.dataset.sliderStep; + } + + setSliderStep({ editingElement, value }) { + editingElement.dataset.sliderStep = value; + const rangeSliderEl = editingElement.querySelector("#s_donation_range_slider"); + if (rangeSliderEl) { + rangeSliderEl.step = value; + } + } + + // TODO AGAU: remove when merging https://github.com/odoo-dev/odoo/pull/4240 + cleanForSave(editingElement) { + delete editingElement.dataset.prefilledOptionsList; + } + + rebuildPrefilledOptions(editingElement, options) { + if (!options) { + options = this.getPrefilledOptionsList({ editingElement }); + } + + // TODO AGAU: remove when merging https://github.com/odoo-dev/odoo/pull/4240 + editingElement.dataset.prefilledOptionsList = options; + + options = JSON.parse(options); + + const displayOptions = editingElement.dataset.displayOptions; + const formEl = editingElement.querySelector(".s_donation_form"); + const donateButtonEl = editingElement.querySelector(".s_donation_donate_btn"); + const prefilledOptions = editingElement.dataset.prefilledOptions; + const showDescriptions = prefilledOptions && editingElement.dataset.descriptions; + + // Slider + const layout = editingElement.dataset.customAmount; + const sliderEl = editingElement.querySelector(".s_donation_range_slider_wrap"); + if (layout !== "slider" || !displayOptions) { + sliderEl?.remove(); + } else if (layout === "slider" && displayOptions && !sliderEl) { + const sliderEl = renderToElement("website_payment.donation.slider", { + minimum_amount: editingElement.dataset.minimumAmount, + maximum_amount: editingElement.dataset.maximumAmount, + slider_step: editingElement.dataset.sliderStep, + }); + formEl.insertBefore(sliderEl, donateButtonEl); + } + + // Hidden inputs for descriptions translation + const descriptionInputContainerEl = editingElement.querySelector( + "#s_donation_description_inputs" + ); + descriptionInputContainerEl.innerHTML = ""; + if (showDescriptions) { + descriptionInputContainerEl.insertBefore( + renderToFragment("website_payment.donation.descriptionTranslationInputs", { + descriptions: options.map((option) => option.description), + }), + null + ); + } + + // Displayed prefilled options + editingElement.querySelector(".s_donation_prefilled_buttons")?.remove(); + if (displayOptions) { + // TODO AGAU: remove when merging https://github.com/odoo-dev/odoo/pull/4240 + { + if (!showDescriptions) { + options = options.map((option) => option.value); + } + } + + const prefilledButtonsEl = renderToElement( + `website_payment.donation.prefilledButtons${ + showDescriptions ? "Descriptions" : "" + }`, + { + prefilled_buttons: prefilledOptions ? options : [], + custom_input: layout === "freeAmount", + minimum_amount: editingElement.dataset.minimumAmount, + } + ); + formEl.insertBefore(prefilledButtonsEl, descriptionInputContainerEl.nextSibling); + } + } +} +registry.category("website-plugins").add(DonationOptionPlugin.id, DonationOptionPlugin); From a2ba4b51d11dba25ac816d444393f22abfd3ff78 Mon Sep 17 00:00:00 2001 From: Serhii Rubanskyi - seru Date: Fri, 9 May 2025 13:55:11 +0200 Subject: [PATCH 108/240] Add history mutations to popup A problem occurred when you try to add popup snippet, then undo => can't scroll anymore. Same for snippet deletion --- .../plugins/options/popup_option_plugin.js | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js index 1e7d39b11d657..bee0e65673729 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js @@ -3,12 +3,11 @@ import { registry } from "@web/core/registry"; import { getElementsWithOption } from "@html_builder/utils/utils"; import { withSequence } from "@html_editor/utils/resource"; import { SNIPPET_SPECIFIC_END } from "@html_builder/website_builder/option_sequence"; - export const COOKIES_BAR = SNIPPET_SPECIFIC_END; class PopupOptionPlugin extends Plugin { static id = "PopupOption"; - static dependencies = ["anchor", "visibility"]; + static dependencies = ["anchor", "visibility", "history"]; resources = { builder_options: [ @@ -31,6 +30,7 @@ class PopupOptionPlugin extends Plugin { }, builder_actions: this.getActions(), on_cloned_handlers: this.onCloned.bind(this), + on_remove_handlers: this.onRemove.bind(this), on_snippet_dropped_handlers: this.onSnippetDropped.bind(this), target_show: this.onTargetShow.bind(this), target_hide: this.onTargetHide.bind(this), @@ -112,9 +112,27 @@ class PopupOptionPlugin extends Plugin { } } + onRemove(el) { + this.onTargetHide(el); + this.dependencies.history.addCustomMutation({ + apply: () => {}, + revert: () => { + this.onTargetShow(el); + }, + }); + } + onSnippetDropped({ snippetEl }) { if (snippetEl.matches(".s_popup")) { this.assignUniqueID(snippetEl); + this.dependencies.history.addCustomMutation({ + apply: () => { + this.onTargetShow(snippetEl); + }, + revert: () => { + this.onTargetHide(snippetEl); + }, + }); } const droppedEls = getElementsWithOption(snippetEl, ".s_popup"); droppedEls.forEach((droppedEl) => From 01a0f7e883499a375d84b6dc9c44438d296a944f Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 25 Apr 2025 11:13:17 +0200 Subject: [PATCH 109/240] option_sequence: fix SNIPPET_SPECIFIC not tracked, add tests, throw on non-existent position or invalid target position --- .../static/src/utils/option_sequence.js | 14 +++++- .../tests/options/option_sequence.test.js | 44 +++++++++++++++++++ 2 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 addons/html_builder/static/tests/options/option_sequence.test.js diff --git a/addons/html_builder/static/src/utils/option_sequence.js b/addons/html_builder/static/src/utils/option_sequence.js index 419fd497db653..92e85ed8e5de4 100644 --- a/addons/html_builder/static/src/utils/option_sequence.js +++ b/addons/html_builder/static/src/utils/option_sequence.js @@ -63,6 +63,12 @@ export function between(previousPosition, nextPosition) { */ export function after(position) { const index = ALL.findIndex((value) => value === position); + if (index === -1) { + throw new Error("Position " + position + " does not exist. Do not use arbitrary numbers."); + } + if (index === ALL.length - 1) { + throw new Error("Cannot place something after END position."); + } const nextPosition = ALL[index + 1]; return between(position, nextPosition); } @@ -75,11 +81,17 @@ export function after(position) { */ export function before(position) { const index = ALL.findIndex((value) => value === position); + if (index === -1) { + throw new Error("Position " + position + " does not exist. Do not use arbitrary numbers."); + } + if (index === 0) { + throw new Error("Cannot place something before BEGIN position."); + } const previousPosition = ALL[index - 1]; return between(previousPosition, position); } -const SNIPPET_SPECIFIC = DEFAULT; +const SNIPPET_SPECIFIC = track(DEFAULT); const [ REPLACE_MEDIA, MEDIA_URL, diff --git a/addons/html_builder/static/tests/options/option_sequence.test.js b/addons/html_builder/static/tests/options/option_sequence.test.js new file mode 100644 index 0000000000000..798ea6ebe4405 --- /dev/null +++ b/addons/html_builder/static/tests/options/option_sequence.test.js @@ -0,0 +1,44 @@ +import { + after, + before, + BEGIN, + END, + SNIPPET_SPECIFIC, + splitBetween, +} from "@html_builder/utils/option_sequence"; +import { expect, test } from "@odoo/hoot"; + +const ARBITRARY_FAKE_POSITION = 7777777777; + +test("before throws if position doesn't exist", async () => { + expect(() => before(ARBITRARY_FAKE_POSITION)).toThrow(); +}); + +test("before throws if position is BEGIN", async () => { + expect(() => before(BEGIN)).toThrow(); +}); + +test("before returns a smaller position", async () => { + expect(before(SNIPPET_SPECIFIC)).toBeLessThan(SNIPPET_SPECIFIC); + expect(before(END)).toBeLessThan(END); +}); + +test("after throws if position doesn't exist", async () => { + expect(() => after(ARBITRARY_FAKE_POSITION)).toThrow(); +}); + +test("after throws if position is END", async () => { + expect(() => after(END)).toThrow(); +}); + +test("after returns a bigger position", async () => { + expect(after(SNIPPET_SPECIFIC)).toBeGreaterThan(SNIPPET_SPECIFIC); + expect(after(BEGIN)).toBeGreaterThan(BEGIN); +}); + +test("splitBetween correctly splits to the right values", async () => { + expect(splitBetween(0, 3, 2)).toMatch([1, 2, 3]); + expect(splitBetween(0, 10, 2)).toMatch([10 / 3, (2 * 10) / 3, 10]); + expect(splitBetween(0, 8, 7)).toMatch([1, 2, 3, 4, 5, 6, 7, 8]); + expect(splitBetween(1, 5, 3)).toMatch([2, 3, 4, 5]); +}); From 16f2c0c8093f63f9cf2963d31fc44de458b7ee25 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 9 May 2025 10:54:53 +0200 Subject: [PATCH 110/240] option_sequence: export DEFAULT, differentiate DEFAULT and SNIPPET_SPECIFIC, improve error detection, refactor --- .../static/src/utils/option_sequence.js | 22 +++++++++++-------- .../src/website_builder/option_sequence.js | 16 +++++++------- .../tests/options/option_sequence.test.js | 8 +++---- 3 files changed, 25 insertions(+), 21 deletions(-) diff --git a/addons/html_builder/static/src/utils/option_sequence.js b/addons/html_builder/static/src/utils/option_sequence.js index 92e85ed8e5de4..30d355a9b4e57 100644 --- a/addons/html_builder/static/src/utils/option_sequence.js +++ b/addons/html_builder/static/src/utils/option_sequence.js @@ -2,11 +2,15 @@ // Module-specific sequences are defined in other option_sequence.js files. const BEGIN = 1; -const DEFAULT = 10; const END = 100; /** Ordered set of known positions. */ const ALL = [BEGIN, END]; +/** + * This position should be used for non-snippet options. + * For the default position of snippet specific options, use {@link SNIPPET_SPECIFIC}. + */ +export const DEFAULT = track(10); /** * Keeps track of a position in the ordered list positions ALL. @@ -32,8 +36,7 @@ function track(position) { * @param {Number} beginPosition position after which to generate positions * @param {Number} endPosition position before which to generate positions * @param {int} count amount of generated positions - * @return {Number[]} containing generated positions within range, and the - * end position + * @return {Number[]} containing {@link count} positions generated within range */ export function splitBetween(beginPosition, endPosition, count) { const result = []; @@ -41,7 +44,6 @@ export function splitBetween(beginPosition, endPosition, count) { for (let index = 1; index <= count; index++) { result.push(track(beginPosition + delta * index)); } - result.push(endPosition); // to detect errors return result; } /** @@ -91,7 +93,7 @@ export function before(position) { return between(previousPosition, position); } -const SNIPPET_SPECIFIC = track(DEFAULT); +const SNIPPET_SPECIFIC = DEFAULT; const [ REPLACE_MEDIA, MEDIA_URL, @@ -101,16 +103,18 @@ const [ DYNAMIC_SVG, AFTER_HTML_BUILDER, SNIPPET_SPECIFIC_BEFORE, - __DETECT_ERROR_1__, + ...__DETECT_ERROR_1__ ] = splitBetween(BEGIN, SNIPPET_SPECIFIC, 8); -if (__DETECT_ERROR_1__ !== SNIPPET_SPECIFIC) { +if (__DETECT_ERROR_1__.length > 0) { console.error("Wrong count in split before default"); } -const [SNIPPET_SPECIFIC_AFTER, SNIPPET_SPECIFIC_NEXT, SNIPPET_SPECIFIC_END, __DETECT_ERROR_2__] = + +const [SNIPPET_SPECIFIC_AFTER, SNIPPET_SPECIFIC_NEXT, SNIPPET_SPECIFIC_END, ...__DETECT_ERROR_2__] = splitBetween(SNIPPET_SPECIFIC, END, 3); -if (__DETECT_ERROR_2__ !== END) { +if (__DETECT_ERROR_2__.length > 0) { console.error("Wrong count in split after default"); } + export { BEGIN, REPLACE_MEDIA, diff --git a/addons/html_builder/static/src/website_builder/option_sequence.js b/addons/html_builder/static/src/website_builder/option_sequence.js index b23f690b12d67..292ea6f462187 100644 --- a/addons/html_builder/static/src/website_builder/option_sequence.js +++ b/addons/html_builder/static/src/website_builder/option_sequence.js @@ -10,9 +10,9 @@ import { // Gives names to website options sequence. -const [TEXT_ALIGNMENT, TITLE_LAYOUT_SIZE, WIDTH, BLOCK_ALIGN, __DETECT_ERROR_WEBSITE_1__] = +const [TEXT_ALIGNMENT, TITLE_LAYOUT_SIZE, WIDTH, BLOCK_ALIGN, ...__DETECT_ERROR_WEBSITE_1__] = splitBetween(AFTER_HTML_BUILDER, SNIPPET_SPECIFIC_BEFORE, 4); -if (__DETECT_ERROR_WEBSITE_1__ !== SNIPPET_SPECIFIC_BEFORE) { +if (__DETECT_ERROR_WEBSITE_1__.length > 0) { console.error("Wrong count in website split before specific"); } export { TEXT_ALIGNMENT, TITLE_LAYOUT_SIZE, WIDTH, BLOCK_ALIGN }; @@ -24,9 +24,9 @@ const [ WEBSITE_BACKGROUND_OPTIONS, GRID_COLUMNS, BOX_BORDER_SHADOW, - __DETECT_ERROR_WEBSITE_2__, + ...__DETECT_ERROR_WEBSITE_2__ ] = splitBetween(SNIPPET_SPECIFIC_AFTER, SNIPPET_SPECIFIC_NEXT, 7); -if (__DETECT_ERROR_WEBSITE_2__ !== SNIPPET_SPECIFIC_NEXT) { +if (__DETECT_ERROR_WEBSITE_2__.length > 0) { console.error("Wrong count in website split after specific"); } export { @@ -44,9 +44,9 @@ const [ SCROLL_BUTTON, CONDITIONAL_VISIBILITY, DEVICE_VISIBILITY, - __DETECT_ERROR_WEBSITE_3__, + ...__DETECT_ERROR_WEBSITE_3__ ] = splitBetween(SNIPPET_SPECIFIC_NEXT, SNIPPET_SPECIFIC_END, 5); -if (__DETECT_ERROR_WEBSITE_3__ !== SNIPPET_SPECIFIC_END) { +if (__DETECT_ERROR_WEBSITE_3__.length > 0) { console.error("Wrong count in website split before specific end"); } export { @@ -56,12 +56,12 @@ export { CONDITIONAL_VISIBILITY, DEVICE_VISIBILITY, }; -const [GRID_IMAGE, ANIMATE, TEXT_HIGHLIGHT, __DETECT_ERROR_WEBSITE_4__] = splitBetween( +const [GRID_IMAGE, ANIMATE, TEXT_HIGHLIGHT, ...__DETECT_ERROR_WEBSITE_4__] = splitBetween( SNIPPET_SPECIFIC_END, END, 3 ); -if (__DETECT_ERROR_WEBSITE_4__ !== END) { +if (__DETECT_ERROR_WEBSITE_4__.length > 0) { console.error("Wrong count in website split after specific end"); } export { GRID_IMAGE, ANIMATE, TEXT_HIGHLIGHT }; diff --git a/addons/html_builder/static/tests/options/option_sequence.test.js b/addons/html_builder/static/tests/options/option_sequence.test.js index 798ea6ebe4405..41dc6622a82ca 100644 --- a/addons/html_builder/static/tests/options/option_sequence.test.js +++ b/addons/html_builder/static/tests/options/option_sequence.test.js @@ -37,8 +37,8 @@ test("after returns a bigger position", async () => { }); test("splitBetween correctly splits to the right values", async () => { - expect(splitBetween(0, 3, 2)).toMatch([1, 2, 3]); - expect(splitBetween(0, 10, 2)).toMatch([10 / 3, (2 * 10) / 3, 10]); - expect(splitBetween(0, 8, 7)).toMatch([1, 2, 3, 4, 5, 6, 7, 8]); - expect(splitBetween(1, 5, 3)).toMatch([2, 3, 4, 5]); + expect(splitBetween(0, 3, 2)).toMatch([1, 2]); + expect(splitBetween(0, 10, 2)).toMatch([10 / 3, (2 * 10) / 3]); + expect(splitBetween(0, 8, 7)).toMatch([1, 2, 3, 4, 5, 6, 7]); + expect(splitBetween(1, 5, 3)).toMatch([2, 3, 4]); }); From 1216e2945c6198c07b31f5f4170abcd4891a3aa3 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 25 Apr 2025 11:14:14 +0200 Subject: [PATCH 111/240] withSequence: throw on non-number sequenceNumber, fix bad imports --- .../static/src/plugins/text_alignment_option_plugin.js | 2 +- .../plugins/options/popup_option_plugin.js | 3 ++- addons/html_editor/static/src/utils/resource.js | 5 +++++ addons/html_editor/static/tests/utils/resource.test.js | 10 ++++++++++ 4 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 addons/html_editor/static/tests/utils/resource.test.js diff --git a/addons/html_builder/static/src/plugins/text_alignment_option_plugin.js b/addons/html_builder/static/src/plugins/text_alignment_option_plugin.js index ffeab6bac57ba..eab93b62c9b4b 100644 --- a/addons/html_builder/static/src/plugins/text_alignment_option_plugin.js +++ b/addons/html_builder/static/src/plugins/text_alignment_option_plugin.js @@ -1,7 +1,7 @@ +import { TEXT_ALIGNMENT } from "@html_builder/website_builder/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; import { withSequence } from "@html_editor/utils/resource"; -import { TEXT_ALIGNMENT } from "@html_builder/utils/option_sequence"; class TextAlignmentOptionPlugin extends Plugin { static id = "textAlignmentOption"; diff --git a/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js index bee0e65673729..0134cad277d0e 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js @@ -1,8 +1,9 @@ +import { SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; import { getElementsWithOption } from "@html_builder/utils/utils"; import { withSequence } from "@html_editor/utils/resource"; -import { SNIPPET_SPECIFIC_END } from "@html_builder/website_builder/option_sequence"; + export const COOKIES_BAR = SNIPPET_SPECIFIC_END; class PopupOptionPlugin extends Plugin { diff --git a/addons/html_editor/static/src/utils/resource.js b/addons/html_editor/static/src/utils/resource.js index aa76e3a3803ed..c397fe579883b 100644 --- a/addons/html_editor/static/src/utils/resource.js +++ b/addons/html_editor/static/src/utils/resource.js @@ -1,6 +1,11 @@ export const resourceSequenceSymbol = Symbol("resourceSequence"); export function withSequence(sequenceNumber, object) { + if (typeof sequenceNumber !== "number") { + throw new Error( + `sequenceNumber must be a number. Got ${sequenceNumber} (${typeof sequenceNumber}).` + ); + } return { [resourceSequenceSymbol]: sequenceNumber, object, diff --git a/addons/html_editor/static/tests/utils/resource.test.js b/addons/html_editor/static/tests/utils/resource.test.js new file mode 100644 index 0000000000000..a6bd5027ca73a --- /dev/null +++ b/addons/html_editor/static/tests/utils/resource.test.js @@ -0,0 +1,10 @@ +import { withSequence } from "@html_editor/utils/resource"; +import { test, expect } from "@odoo/hoot"; + +test("withSequence throws if sequenceNumber is not a number", () => { + for (const value of [undefined, null, "bonjour", { random: "object" }, true, false]) { + expect(() => { + withSequence(value, { a: "resource" }); + }).toThrow(); + } +}); From 91e32cbe755139e63c3a57e0e8bc0c27e483ec9e Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 25 Apr 2025 11:18:02 +0200 Subject: [PATCH 112/240] countdown options: move to website_builder --- .../plugins/options}/countdown_option.inside.scss | 0 .../plugins/options}/countdown_option.xml | 0 .../plugins/options}/countdown_option_plugin.js | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename addons/html_builder/static/src/{plugins => website_builder/plugins/options}/countdown_option.inside.scss (100%) rename addons/html_builder/static/src/{plugins => website_builder/plugins/options}/countdown_option.xml (100%) rename addons/html_builder/static/src/{plugins => website_builder/plugins/options}/countdown_option_plugin.js (100%) diff --git a/addons/html_builder/static/src/plugins/countdown_option.inside.scss b/addons/html_builder/static/src/website_builder/plugins/options/countdown_option.inside.scss similarity index 100% rename from addons/html_builder/static/src/plugins/countdown_option.inside.scss rename to addons/html_builder/static/src/website_builder/plugins/options/countdown_option.inside.scss diff --git a/addons/html_builder/static/src/plugins/countdown_option.xml b/addons/html_builder/static/src/website_builder/plugins/options/countdown_option.xml similarity index 100% rename from addons/html_builder/static/src/plugins/countdown_option.xml rename to addons/html_builder/static/src/website_builder/plugins/options/countdown_option.xml diff --git a/addons/html_builder/static/src/plugins/countdown_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/countdown_option_plugin.js similarity index 100% rename from addons/html_builder/static/src/plugins/countdown_option_plugin.js rename to addons/html_builder/static/src/website_builder/plugins/options/countdown_option_plugin.js From 4aced6f3e8f907097bc1f5d5252882d438098d58 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 25 Apr 2025 11:26:25 +0200 Subject: [PATCH 113/240] remove magic numbers for withSequence in options --- .../static/src/plugins/alert_option_plugin.js | 4 +++- .../static/src/plugins/size_option_plugin.js | 4 +++- .../plugins/timeline_images_option_plugin.js | 7 ++++--- .../plugins/vertical_justify_option_plugin.js | 3 ++- .../plugins/options/badge_option_plugin.js | 4 +++- .../plugins/options/blockquote_option_plugin.js | 6 ++++-- .../plugins/options/countdown_option_plugin.js | 3 ++- .../options/dynamic_snippet_option_plugin.js | 3 ++- .../plugins/options/embed_code_option_plugin.js | 3 ++- .../options/faq_horizontal_option_plugin.js | 3 ++- .../plugins/options/instagram_option_plugin.js | 3 ++- .../plugins/options/media_list_option_plugin.js | 5 +++-- .../options/navtabs_style_option_plugin.js | 5 +++-- .../plugins/options/popup_option_plugin.js | 7 ++++--- .../pricelist_boxed_option_plugin.js | 7 ++++--- .../pricelist_option/pricelist_cafe_plugin.js | 9 +++++---- .../pricelist_option/product_catalog_plugin.js | 7 ++++--- .../options/timeline_list_option_plugin.js | 8 +++++--- .../newsletter_layout_option_plugin.js | 4 +++- ...newsletter_subscribe_common_option_plugin.js | 17 +++++++++++------ .../courses_list_page_option_plugin.js | 7 +++++-- 21 files changed, 76 insertions(+), 43 deletions(-) diff --git a/addons/html_builder/static/src/plugins/alert_option_plugin.js b/addons/html_builder/static/src/plugins/alert_option_plugin.js index 7b7094980da86..dcb664661466a 100644 --- a/addons/html_builder/static/src/plugins/alert_option_plugin.js +++ b/addons/html_builder/static/src/plugins/alert_option_plugin.js @@ -1,3 +1,5 @@ +import { before } from "@html_builder/utils/option_sequence"; +import { WIDTH } from "@html_builder/website_builder/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { fonts } from "@html_editor/utils/fonts"; import { registry } from "@web/core/registry"; @@ -35,7 +37,7 @@ class AlertOptionPlugin extends Plugin { }, }, builder_options: [ - withSequence(5, { + withSequence(before(WIDTH), { template: "html_builder.AlertOption", selector: ".s_alert", }), diff --git a/addons/html_builder/static/src/plugins/size_option_plugin.js b/addons/html_builder/static/src/plugins/size_option_plugin.js index 657874f934dc8..9f21b6ae1477f 100644 --- a/addons/html_builder/static/src/plugins/size_option_plugin.js +++ b/addons/html_builder/static/src/plugins/size_option_plugin.js @@ -1,3 +1,5 @@ +import { after } from "@html_builder/utils/option_sequence"; +import { WIDTH } from "@html_builder/website_builder/option_sequence"; import { withSequence } from "@html_editor/utils/resource"; import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; @@ -6,7 +8,7 @@ class SizeOptionPlugin extends Plugin { static id = "sizeOption"; resources = { builder_options: [ - withSequence(20, { + withSequence(after(WIDTH), { template: "html_builder.SizeOption", selector: ".s_alert", }), diff --git a/addons/html_builder/static/src/plugins/timeline_images_option_plugin.js b/addons/html_builder/static/src/plugins/timeline_images_option_plugin.js index e71bc3dcf8867..0666c7888b187 100644 --- a/addons/html_builder/static/src/plugins/timeline_images_option_plugin.js +++ b/addons/html_builder/static/src/plugins/timeline_images_option_plugin.js @@ -1,3 +1,4 @@ +import { BEGIN, SNIPPET_SPECIFIC, SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -7,15 +8,15 @@ class TimelineImagesOptionPlugin extends Plugin { static dependencies = ["history"]; resources = { builder_options: [ - withSequence(5, { + withSequence(BEGIN, { template: "html_builder.TimelineImagesOption", selector: ".s_timeline_images", }), - withSequence(10, { + withSequence(SNIPPET_SPECIFIC_END, { template: "html_builder.DotLinesColorOption", selector: ".s_timeline_images", }), - withSequence(5, { + withSequence(SNIPPET_SPECIFIC, { template: "html_builder.DotColorOption", selector: ".s_timeline_images .s_timeline_images_row", }), diff --git a/addons/html_builder/static/src/plugins/vertical_justify_option_plugin.js b/addons/html_builder/static/src/plugins/vertical_justify_option_plugin.js index e036d14038880..09893d633daa8 100644 --- a/addons/html_builder/static/src/plugins/vertical_justify_option_plugin.js +++ b/addons/html_builder/static/src/plugins/vertical_justify_option_plugin.js @@ -1,3 +1,4 @@ +import { END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; import { withSequence } from "@html_editor/utils/resource"; @@ -6,7 +7,7 @@ class VerticalJustifyOptionPlugin extends Plugin { static id = "verticalJustifyOption"; resources = { builder_options: [ - withSequence(25, { + withSequence(END, { template: "html_builder.VerticalJustifyOption", selector: ".s_masonry_block .o_grid_item, .s_quadrant .o_grid_item", exclude: ".o_grid_item_image", diff --git a/addons/html_builder/static/src/website_builder/plugins/options/badge_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/badge_option_plugin.js index f9a8f009a733f..852f551490688 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/badge_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/badge_option_plugin.js @@ -1,3 +1,5 @@ +import { before } from "@html_builder/utils/option_sequence"; +import { ANIMATE } from "@html_builder/website_builder/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -6,7 +8,7 @@ class BadgeOptionPlugin extends Plugin { static id = "badgeOption"; resources = { builder_options: [ - withSequence(10, { + withSequence(before(ANIMATE), { template: "html_builder.BadgeOption", selector: ".s_badge", }), diff --git a/addons/html_builder/static/src/website_builder/plugins/options/blockquote_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/blockquote_option_plugin.js index 58b629a701195..7ec20014b522d 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/blockquote_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/blockquote_option_plugin.js @@ -1,3 +1,5 @@ +import { after, END } from "@html_builder/utils/option_sequence"; +import { ANIMATE } from "@html_builder/website_builder/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; import { withSequence } from "@html_editor/utils/resource"; @@ -9,7 +11,7 @@ class BlockquoteOptionPlugin extends Plugin { resources = { mark_color_level_selector_params: [{ selector: this.selector }], builder_options: [ - withSequence(30, { + withSequence(after(ANIMATE), { selector: this.selector, OptionComponent: WebsiteBackgroundOption, props: { @@ -19,7 +21,7 @@ class BlockquoteOptionPlugin extends Plugin { withColorCombinations: true, }, }), - withSequence(40, { + withSequence(END, { template: "website.BlockquoteOption", selector: this.selector, }), diff --git a/addons/html_builder/static/src/website_builder/plugins/options/countdown_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/countdown_option_plugin.js index 8c82472098210..3323a3874884c 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/countdown_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/countdown_option_plugin.js @@ -1,3 +1,4 @@ +import { before, SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -7,7 +8,7 @@ class CountdownOptionPlugin extends Plugin { static id = "CountdownOption"; resources = { builder_options: [ - withSequence(50, { + withSequence(before(SNIPPET_SPECIFIC_END), { template: "html_builder.CountdownOption", selector: ".s_countdown", cleanForSave: this.cleanForSave.bind(this), diff --git a/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option_plugin.js index a334008a2c437..5f84ceabc7ac4 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option_plugin.js @@ -1,3 +1,4 @@ +import { SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { rpc } from "@web/core/network/rpc"; @@ -16,7 +17,7 @@ class DynamicSnippetOptionPlugin extends Plugin { modelNameFilter = ""; resources = { builder_options: [ - withSequence(10, { + withSequence(SNIPPET_SPECIFIC_END, { OptionComponent: DynamicSnippetOption, props: { modelNameFilter: this.modelNameFilter, diff --git a/addons/html_builder/static/src/website_builder/plugins/options/embed_code_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/embed_code_option_plugin.js index 128ef57e0d312..4a30854f9606f 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/embed_code_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/embed_code_option_plugin.js @@ -1,3 +1,4 @@ +import { BEGIN } from "@html_builder/utils/option_sequence"; import { EmbedCodeOptionDialog } from "./embed_code_option_dialog"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; @@ -10,7 +11,7 @@ class EmbedCodeOptionPlugin extends Plugin { resources = { builder_options: [ - withSequence(5, { + withSequence(BEGIN, { template: "html_builder.EmbedCodeOption", selector: ".s_embed_code", }), diff --git a/addons/html_builder/static/src/website_builder/plugins/options/faq_horizontal_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/faq_horizontal_option_plugin.js index 9a6395c77712c..890c4b6222b9c 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/faq_horizontal_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/faq_horizontal_option_plugin.js @@ -1,3 +1,4 @@ +import { BEGIN } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -7,7 +8,7 @@ class FaqHorizontalOptionPlugin extends Plugin { static dependencies = ["clone"]; resources = { builder_options: [ - withSequence(5, { + withSequence(BEGIN, { template: "html_builder.FaqHorizontalOption", selector: ".s_faq_horizontal", }), diff --git a/addons/html_builder/static/src/website_builder/plugins/options/instagram_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/instagram_option_plugin.js index ac26dad266b3d..65825a5f2bde1 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/instagram_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/instagram_option_plugin.js @@ -1,3 +1,4 @@ +import { SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; import { _t } from "@web/core/l10n/translation"; @@ -10,7 +11,7 @@ class InstagramOptionPlugin extends Plugin { resources = { builder_options: [ - withSequence(40, { + withSequence(SNIPPET_SPECIFIC_END, { template: "html_builder.InstagramOption", selector: ".s_instagram_page", }), diff --git a/addons/html_builder/static/src/website_builder/plugins/options/media_list_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/media_list_option_plugin.js index ed939135548fe..fe4dd82cc712a 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/media_list_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/media_list_option_plugin.js @@ -1,3 +1,4 @@ +import { BEGIN, END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -8,11 +9,11 @@ class MediaListOptionPlugin extends Plugin { mediaListItemOptionSelector = ".s_media_list_item"; resources = { builder_options: [ - withSequence(5, { + withSequence(BEGIN, { template: "website.MediaListOption", selector: ".s_media_list", }), - withSequence(20, { + withSequence(END, { OptionComponent: MediaListItemOption, selector: this.mediaListItemOptionSelector, }), diff --git a/addons/html_builder/static/src/website_builder/plugins/options/navtabs_style_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/navtabs_style_option_plugin.js index d29c274064703..044813e2d3cba 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/navtabs_style_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/navtabs_style_option_plugin.js @@ -1,3 +1,4 @@ +import { SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -6,12 +7,12 @@ class NavTabsStyleOptionPlugin extends Plugin { static id = "navTabsOptionStyle"; resources = { builder_options: [ - withSequence(50, { + withSequence(SNIPPET_SPECIFIC_END, { template: "html_builder.NavTabsStyleOption", selector: ".s_tabs", applyTo: ".s_tabs_main", }), - withSequence(50, { + withSequence(SNIPPET_SPECIFIC_END, { template: "html_builder.NavTabsImagesStyleOption", selector: ".s_tabs_images", applyTo: ".s_tabs_main", diff --git a/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js index 0134cad277d0e..84cc239f221fa 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js @@ -1,9 +1,10 @@ -import { SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; +import { SNIPPET_SPECIFIC, SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; import { getElementsWithOption } from "@html_builder/utils/utils"; import { withSequence } from "@html_editor/utils/resource"; +export const POPUP = SNIPPET_SPECIFIC; export const COOKIES_BAR = SNIPPET_SPECIFIC_END; class PopupOptionPlugin extends Plugin { @@ -12,12 +13,12 @@ class PopupOptionPlugin extends Plugin { resources = { builder_options: [ - { + withSequence(POPUP, { template: "html_builder.PopupOption", selector: ".s_popup", exclude: "#website_cookies_bar", applyTo: ".modal", - }, + }), withSequence(COOKIES_BAR, { template: "html_builder.PopupCookiesOption", selector: ".s_popup#website_cookies_bar", diff --git a/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_boxed_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_boxed_option_plugin.js index ba7161add3163..14c1010ac0ddc 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_boxed_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_boxed_option_plugin.js @@ -1,3 +1,4 @@ +import { BEGIN, SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -7,7 +8,7 @@ class PriceListBoxedOptionPlugin extends Plugin { static id = "priceListBoxedOption"; resources = { builder_options: [ - withSequence(5, { + withSequence(BEGIN, { selector: ".s_pricelist_boxed", OptionComponent: AddProductOption, props: { @@ -16,7 +17,7 @@ class PriceListBoxedOptionPlugin extends Plugin { productSelector: ".s_pricelist_boxed_item", }, }), - withSequence(5, { + withSequence(BEGIN, { selector: ".s_pricelist_boxed_section", OptionComponent: AddProductOption, props: { @@ -24,7 +25,7 @@ class PriceListBoxedOptionPlugin extends Plugin { productSelector: ".s_pricelist_boxed_item", }, }), - withSequence(10, { + withSequence(SNIPPET_SPECIFIC_END, { template: "html_builder.PriceListBoxedDescriptionOption", selector: ".s_pricelist_boxed", }), diff --git a/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_cafe_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_cafe_plugin.js index e05a4521226f3..4a82cffcddb77 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_cafe_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/pricelist_cafe_plugin.js @@ -1,4 +1,5 @@ import { VerticalAlignmentOption } from "@html_builder/plugins/vertical_alignment_option"; +import { BEGIN, SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -8,7 +9,7 @@ class PriceListCafePlugin extends Plugin { static id = "priceList"; resources = { builder_options: [ - withSequence(5, { + withSequence(BEGIN, { selector: ".s_pricelist_cafe", OptionComponent: AddProductOption, props: { @@ -17,12 +18,12 @@ class PriceListCafePlugin extends Plugin { productSelector: ".s_pricelist_cafe_item", }, }), - withSequence(6, { + withSequence(BEGIN, { selector: ".s_pricelist_cafe", OptionComponent: VerticalAlignmentOption, applyTo: ".row:has(.s_pricelist_cafe_col)", }), - withSequence(5, { + withSequence(BEGIN, { selector: ".s_pricelist_cafe .row > div", OptionComponent: AddProductOption, props: { @@ -30,7 +31,7 @@ class PriceListCafePlugin extends Plugin { productSelector: ".s_pricelist_cafe_item", }, }), - withSequence(10, { + withSequence(SNIPPET_SPECIFIC_END, { template: "html_builder.PriceListCafeDescriptionOption", selector: ".s_pricelist_cafe", }), diff --git a/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/product_catalog_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/product_catalog_plugin.js index 18753d5c1b55e..66f693616bb80 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/product_catalog_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/pricelist_option/product_catalog_plugin.js @@ -1,3 +1,4 @@ +import { BEGIN, SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -7,7 +8,7 @@ class ProductCatalogOptionPlugin extends Plugin { static id = "productCatalogOptionPlugin"; resources = { builder_options: [ - withSequence(5, { + withSequence(BEGIN, { selector: ".s_product_catalog", OptionComponent: AddProductOption, props: { @@ -16,7 +17,7 @@ class ProductCatalogOptionPlugin extends Plugin { productSelector: ".s_product_catalog_dish", }, }), - withSequence(5, { + withSequence(BEGIN, { selector: ".s_product_catalog .row > div", OptionComponent: AddProductOption, props: { @@ -24,7 +25,7 @@ class ProductCatalogOptionPlugin extends Plugin { productSelector: ".s_product_catalog_dish", }, }), - withSequence(10, { + withSequence(SNIPPET_SPECIFIC_END, { template: "html_builder.ProductCatalogDescriptionOption", selector: ".s_product_catalog", }), diff --git a/addons/html_builder/static/src/website_builder/plugins/options/timeline_list_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/timeline_list_option_plugin.js index 8d9eb89951e30..bcb0ffbc93794 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/timeline_list_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/timeline_list_option_plugin.js @@ -1,3 +1,4 @@ +import { BEGIN, SNIPPET_SPECIFIC_END } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -6,15 +7,16 @@ class TimelineListOptionPlugin extends Plugin { static id = "timelineListOption"; resources = { builder_options: [ - withSequence(5, { + // TODO AGAU: alignment option sequence doesn't match master, must split template + withSequence(BEGIN, { template: "html_builder.TimelineListOption", selector: ".s_timeline_list", }), - withSequence(10, { + withSequence(SNIPPET_SPECIFIC_END, { template: "html_builder.DotLinesColorOption", selector: ".s_timeline_list", }), - withSequence(5, { + withSequence(BEGIN, { template: "html_builder.DotColorOption", selector: ".s_timeline_list .s_timeline_list_row", }), diff --git a/addons/html_builder/static/src/website_mass_mailing/newsletter_layout_option_plugin.js b/addons/html_builder/static/src/website_mass_mailing/newsletter_layout_option_plugin.js index b1cb2d0ddeb1e..921100ac23107 100644 --- a/addons/html_builder/static/src/website_mass_mailing/newsletter_layout_option_plugin.js +++ b/addons/html_builder/static/src/website_mass_mailing/newsletter_layout_option_plugin.js @@ -1,3 +1,5 @@ +import { before } from "@html_builder/utils/option_sequence"; +import { NEWSLETTER_SELECT } from "@html_builder/website_mass_mailing/newsletter_subscribe_common_option_plugin"; import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; import { withSequence } from "@html_editor/utils/resource"; @@ -8,7 +10,7 @@ export class NewsletterLayoutOptionPlugin extends Plugin { resources = { builder_options: [ - withSequence(1, { + withSequence(before(NEWSLETTER_SELECT), { template: "website_mass_mailing.NewsletterLayoutOption", selector: ".s_newsletter_block", applyTo: diff --git a/addons/html_builder/static/src/website_mass_mailing/newsletter_subscribe_common_option_plugin.js b/addons/html_builder/static/src/website_mass_mailing/newsletter_subscribe_common_option_plugin.js index 2f0bb7af9c8d0..691fcb4fd426b 100644 --- a/addons/html_builder/static/src/website_mass_mailing/newsletter_subscribe_common_option_plugin.js +++ b/addons/html_builder/static/src/website_mass_mailing/newsletter_subscribe_common_option_plugin.js @@ -1,13 +1,18 @@ +import { before, SNIPPET_SPECIFIC } from "@html_builder/utils/option_sequence"; +import { POPUP } from "@html_builder/website_builder/plugins/options/popup_option_plugin"; import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; import { NewsletterSubscribeCommonOption } from "./newsletter_subscribe_common_option"; +export const NEWSLETTER_SELECT = before(POPUP); + class NewsletterSubscribeCommonOptionPlugin extends Plugin { static id = "newsletterSubscribeCommonOption"; static dependencies = ["mailingListSubscribeOption", "recaptchaSubscribeOption"]; resources = { builder_options: [ - { + withSequence(NEWSLETTER_SELECT, { OptionComponent: NewsletterSubscribeCommonOption, props: this.getProps(), selector: ".s_newsletter_list", @@ -18,17 +23,17 @@ class NewsletterSubscribeCommonOptionPlugin extends Plugin { ".s_newsletter_centered .s_newsletter_list", ".s_newsletter_grid .s_newsletter_list", ].join(", "), - }, - { + }), + withSequence(NEWSLETTER_SELECT, { OptionComponent: NewsletterSubscribeCommonOption, props: this.getProps(), selector: ".o_newsletter_popup", applyTo: ".s_newsletter_list", - }, - { + }), + withSequence(SNIPPET_SPECIFIC, { template: "html_builder.MailingListSubscribeFormOption", selector: ".s_newsletter_subscribe_form", - }, + }), ], dropzone_selector: [ { diff --git a/addons/html_builder/static/src/website_slides/courses_list_page_option_plugin.js b/addons/html_builder/static/src/website_slides/courses_list_page_option_plugin.js index 106b9d769711d..10ede7446baca 100644 --- a/addons/html_builder/static/src/website_slides/courses_list_page_option_plugin.js +++ b/addons/html_builder/static/src/website_slides/courses_list_page_option_plugin.js @@ -1,20 +1,23 @@ +import { after, DEFAULT } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { _t } from "@web/core/l10n/translation"; import { registry } from "@web/core/registry"; +const COURSES_LIST_PAGE = DEFAULT; + class CoursesListPageOption extends Plugin { static id = "coursesListPageOption"; resources = { builder_options: [ - withSequence(15, { + withSequence(COURSES_LIST_PAGE, { template: "website_slides.CoursesListPageOption", selector: "main:has(.o_wslides_home_main)", editableOnly: false, title: _t("Courses Page"), groups: ["website.group_website_designer"], }), - withSequence(20, { + withSequence(after(COURSES_LIST_PAGE), { template: "website_slides.CoursesListAsidePageOption", selector: "main:has(.o_wslides_home_aside_loggedin)", editableOnly: false, From d394678a752deae46d551a918291e704ebe07782 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 9 May 2025 11:20:36 +0200 Subject: [PATCH 114/240] add withSequence to dynamic snippets --- .../dynamic_snippet_blog_posts_option_plugin.js | 10 +++++++--- .../options/dynamic_snippet_carousel_option_plugin.js | 9 ++++++--- .../plugins/options/dynamic_snippet_option_plugin.js | 4 +++- .../dynamic_snippet_events_option_plugin.js | 10 +++++++--- .../dynamic_snippet_products_option_plugin.js | 6 ++++-- 5 files changed, 27 insertions(+), 12 deletions(-) diff --git a/addons/html_builder/static/src/website_blog/dynamic_snippet_blog_posts_option_plugin.js b/addons/html_builder/static/src/website_blog/dynamic_snippet_blog_posts_option_plugin.js index 84593d5b8cc4e..e5ac504c27af5 100644 --- a/addons/html_builder/static/src/website_blog/dynamic_snippet_blog_posts_option_plugin.js +++ b/addons/html_builder/static/src/website_blog/dynamic_snippet_blog_posts_option_plugin.js @@ -1,5 +1,9 @@ -import { setDatasetIfUndefined } from "@html_builder/website_builder/plugins/options/dynamic_snippet_option_plugin"; +import { + DYNAMIC_SNIPPET, + setDatasetIfUndefined, +} from "@html_builder/website_builder/plugins/options/dynamic_snippet_option_plugin"; import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; import { DynamicSnippetBlogPostsOption } from "./dynamic_snippet_blog_posts_option"; @@ -9,14 +13,14 @@ class DynamicSnippetBlogPostsOptionPlugin extends Plugin { modelNameFilter = "blog.post"; selector = ".s_dynamic_snippet_blog_posts"; resources = { - builder_options: { + builder_options: withSequence(DYNAMIC_SNIPPET, { OptionComponent: DynamicSnippetBlogPostsOption, props: { modelNameFilter: this.modelNameFilter, fetchBlogs: this.fetchBlogs.bind(this), }, selector: this.selector, - }, + }), on_snippet_dropped_handlers: this.onSnippetDropped.bind(this), }; setup() { diff --git a/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_carousel_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_carousel_option_plugin.js index af80d3fa03160..22be837133261 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_carousel_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_carousel_option_plugin.js @@ -1,7 +1,10 @@ import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; import { DynamicSnippetCarouselOption } from "./dynamic_snippet_carousel_option"; -import { setDatasetIfUndefined } from "./dynamic_snippet_option_plugin"; +import { DYNAMIC_SNIPPET, setDatasetIfUndefined } from "./dynamic_snippet_option_plugin"; + +export const DYNAMIC_SNIPPET_CAROUSEL = DYNAMIC_SNIPPET; class DynamicSnippetCarouselOptionPlugin extends Plugin { static id = "dynamicSnippetCarouselOption"; @@ -18,13 +21,13 @@ class DynamicSnippetCarouselOptionPlugin extends Plugin { getValue: ({ editingElement }) => editingElement.dataset.carouselInterval / 1000, }, }, - builder_options: { + builder_options: withSequence(DYNAMIC_SNIPPET_CAROUSEL, { OptionComponent: DynamicSnippetCarouselOption, props: { modelNameFilter: this.modelNameFilter, }, selector: this.selector, - }, + }), dynamic_snippet_template_updated: this.onTemplateUpdated.bind(this), on_snippet_dropped_handlers: this.onSnippetDropped.bind(this), }; diff --git a/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option_plugin.js index 5f84ceabc7ac4..3ce75aaed1071 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/dynamic_snippet_option_plugin.js @@ -6,6 +6,8 @@ import { registry } from "@web/core/registry"; import { Cache } from "@web/core/utils/cache"; import { DynamicSnippetOption } from "./dynamic_snippet_option"; +export const DYNAMIC_SNIPPET = SNIPPET_SPECIFIC_END; + class DynamicSnippetOptionPlugin extends Plugin { static id = "dynamicSnippetOption"; static shared = [ @@ -17,7 +19,7 @@ class DynamicSnippetOptionPlugin extends Plugin { modelNameFilter = ""; resources = { builder_options: [ - withSequence(SNIPPET_SPECIFIC_END, { + withSequence(DYNAMIC_SNIPPET, { OptionComponent: DynamicSnippetOption, props: { modelNameFilter: this.modelNameFilter, diff --git a/addons/html_builder/static/src/website_event/dynamic_snippet_events_option_plugin.js b/addons/html_builder/static/src/website_event/dynamic_snippet_events_option_plugin.js index f584da2a75dce..e0fd9ef4a6728 100644 --- a/addons/html_builder/static/src/website_event/dynamic_snippet_events_option_plugin.js +++ b/addons/html_builder/static/src/website_event/dynamic_snippet_events_option_plugin.js @@ -1,5 +1,9 @@ -import { setDatasetIfUndefined } from "@html_builder/website_builder/plugins/options/dynamic_snippet_option_plugin"; +import { + DYNAMIC_SNIPPET, + setDatasetIfUndefined, +} from "@html_builder/website_builder/plugins/options/dynamic_snippet_option_plugin"; import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; import { DynamicSnippetEventsOption } from "./dynamic_snippet_events_option"; @@ -9,13 +13,13 @@ class DynamicSnippetEventsOptionPlugin extends Plugin { modelNameFilter = "event.event"; selector = ".s_event_upcoming_snippet"; resources = { - builder_options: { + builder_options: withSequence(DYNAMIC_SNIPPET, { OptionComponent: DynamicSnippetEventsOption, props: { modelNameFilter: this.modelNameFilter, }, selector: this.selector, - }, + }), on_snippet_dropped_handlers: this.onSnippetDropped.bind(this), }; async onSnippetDropped({ snippetEl }) { diff --git a/addons/html_builder/static/src/website_sale/dynamic_snippet_products_option_plugin.js b/addons/html_builder/static/src/website_sale/dynamic_snippet_products_option_plugin.js index 31c2667e83f0e..40464297ebe0c 100644 --- a/addons/html_builder/static/src/website_sale/dynamic_snippet_products_option_plugin.js +++ b/addons/html_builder/static/src/website_sale/dynamic_snippet_products_option_plugin.js @@ -1,5 +1,7 @@ +import { DYNAMIC_SNIPPET_CAROUSEL } from "@html_builder/website_builder/plugins/options/dynamic_snippet_carousel_option_plugin"; import { setDatasetIfUndefined } from "@html_builder/website_builder/plugins/options/dynamic_snippet_option_plugin"; import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; import { DynamicSnippetProductsOption, @@ -12,14 +14,14 @@ class DynamicSnippetProductsOptionPlugin extends Plugin { selector = ".s_dynamic_snippet_products"; modelNameFilter = "product.product"; resources = { - builder_options: { + builder_options: withSequence(DYNAMIC_SNIPPET_CAROUSEL, { OptionComponent: DynamicSnippetProductsOption, props: { modelNameFilter: this.modelNameFilter, fetchCategories: this.fetchCategories.bind(this), }, selector: this.selector, - }, + }), dynamic_snippet_template_updated: this.onTemplateUpdated.bind(this), on_snippet_dropped_handlers: this.onSnippetDropped.bind(this), }; From 8259a650cf2ebb737363343175a5dad30855a9dd Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 9 May 2025 11:31:28 +0200 Subject: [PATCH 115/240] add withSequence to event page options --- .../src/website_event/event_page_option_plugin.js | 5 +++-- .../website_event/events_list_page_option_plugin.js | 6 ++++-- .../static/src/website_event/option_sequence.js | 12 ++++++++++++ .../event_page_option_plugin.js | 5 +++-- .../event_track_page_option_plugin.js | 10 ++++++---- 5 files changed, 28 insertions(+), 10 deletions(-) create mode 100644 addons/html_builder/static/src/website_event/option_sequence.js diff --git a/addons/html_builder/static/src/website_event/event_page_option_plugin.js b/addons/html_builder/static/src/website_event/event_page_option_plugin.js index 3534fd4fab5e6..9c84e1e7ac7ab 100644 --- a/addons/html_builder/static/src/website_event/event_page_option_plugin.js +++ b/addons/html_builder/static/src/website_event/event_page_option_plugin.js @@ -1,3 +1,4 @@ +import { EVENT_PAGE, EVENT_PAGE_MAIN } from "@html_builder/website_event/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { _t } from "@web/core/l10n/translation"; @@ -8,14 +9,14 @@ class EventPageOption extends Plugin { evenPageSelector = "main:has(.o_wevent_event)"; resources = { builder_options: [ - withSequence(10, { + withSequence(EVENT_PAGE, { template: "website_event.EventPageOption", selector: this.evenPageSelector, editableOnly: false, title: _t("Event Page"), groups: ["website.group_website_designer"], }), - withSequence(20, { + withSequence(EVENT_PAGE_MAIN, { template: "website_event.EventMainPageOption", selector: "main:has(#o_wevent_event_main)", editableOnly: false, diff --git a/addons/html_builder/static/src/website_event/events_list_page_option_plugin.js b/addons/html_builder/static/src/website_event/events_list_page_option_plugin.js index 5e024a7654434..756ed91a1c4da 100644 --- a/addons/html_builder/static/src/website_event/events_list_page_option_plugin.js +++ b/addons/html_builder/static/src/website_event/events_list_page_option_plugin.js @@ -1,16 +1,18 @@ +import { DEFAULT } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; class EventsListPageOptionPlugin extends Plugin { static id = "eventsListPageOption"; resources = { builder_options: [ - { + withSequence(DEFAULT, { template: "website_event.EventsListPageOption", selector: "main:has(.o_wevent_events_list)", editableOnly: false, groups: ["website.group_website_designer"], - }, + }), ], }; } diff --git a/addons/html_builder/static/src/website_event/option_sequence.js b/addons/html_builder/static/src/website_event/option_sequence.js new file mode 100644 index 0000000000000..24cea03425391 --- /dev/null +++ b/addons/html_builder/static/src/website_event/option_sequence.js @@ -0,0 +1,12 @@ +import { DEFAULT, END, splitBetween } from "@html_builder/utils/option_sequence"; + +const EVENT_PAGE = DEFAULT; +const [EXHIBITOR_FILTER, SPONSOR, TRACK, EVENT_PAGE_MAIN, ...__DETECT_ERROR_1__] = splitBetween( + EVENT_PAGE, + END, + 4 +); +if (__DETECT_ERROR_1__.length > 0) { + console.error("Wrong count in split after EVENT_PAGE_MAIN"); +} +export { EVENT_PAGE, EXHIBITOR_FILTER, SPONSOR, TRACK, EVENT_PAGE_MAIN }; diff --git a/addons/html_builder/static/src/website_event_exhibitor/event_page_option_plugin.js b/addons/html_builder/static/src/website_event_exhibitor/event_page_option_plugin.js index 29c235783609d..a68aa4c4e267f 100644 --- a/addons/html_builder/static/src/website_event_exhibitor/event_page_option_plugin.js +++ b/addons/html_builder/static/src/website_event_exhibitor/event_page_option_plugin.js @@ -1,3 +1,4 @@ +import { EXHIBITOR_FILTER, SPONSOR } from "@html_builder/website_event/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -6,13 +7,13 @@ class EventPageOption extends Plugin { static id = "eventExhibitorPageOption"; resources = { builder_options: [ - withSequence(15, { + withSequence(EXHIBITOR_FILTER, { template: "website_event_exhibitor.EventPageFilterOption", selector: "main:has(.o_wevent_event_tags_form)", editableOnly: false, groups: ["website.group_website_designer"], }), - withSequence(20, { + withSequence(SPONSOR, { template: "website_event_exhibitor.EventPageOption", selector: "main:has(.o_wevent_event)", editableOnly: false, diff --git a/addons/html_builder/static/src/website_event_track/event_track_page_option_plugin.js b/addons/html_builder/static/src/website_event_track/event_track_page_option_plugin.js index 73183251473ca..741bfab9c77e2 100644 --- a/addons/html_builder/static/src/website_event_track/event_track_page_option_plugin.js +++ b/addons/html_builder/static/src/website_event_track/event_track_page_option_plugin.js @@ -1,4 +1,6 @@ +import { TRACK } from "@html_builder/website_event/option_sequence"; import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; import { _t } from "@web/core/l10n/translation"; import { registry } from "@web/core/registry"; @@ -6,20 +8,20 @@ class EventTrackPageOption extends Plugin { static id = "eventTrackPageOption"; resources = { builder_options: [ - { + withSequence(TRACK, { template: "website_event_track.eventTrackPageOptionTopbar", selector: "main:has(.o_weagenda_topbar_filters)", title: _t("Event Page"), editableOnly: false, groups: ["website.group_website_designer"], - }, - { + }), + withSequence(TRACK, { template: "website_event_track.EventTrackPageOption", selector: "main:has(.o_wesession_index)", title: _t("Event Page"), editableOnly: false, groups: ["website.group_website_designer"], - }, + }), ], }; } From b63cc0065896690372067fd1f7dbb0f93454b684 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 9 May 2025 13:52:31 +0200 Subject: [PATCH 116/240] add withSequence to forums index page --- .../static/src/website_forum/forum_page_option_plugin.js | 8 ++++++-- .../slides_forum_page_option_plugin.js | 7 +++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/addons/html_builder/static/src/website_forum/forum_page_option_plugin.js b/addons/html_builder/static/src/website_forum/forum_page_option_plugin.js index 4c674379df281..1d7fff59e8a90 100644 --- a/addons/html_builder/static/src/website_forum/forum_page_option_plugin.js +++ b/addons/html_builder/static/src/website_forum/forum_page_option_plugin.js @@ -1,18 +1,22 @@ +import { DEFAULT } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; import { _t } from "@web/core/l10n/translation"; +export const FORUMS_INDEX = DEFAULT; + class ForumPageOptionPlugin extends Plugin { static id = "forumPageOption"; resources = { builder_options: [ - { + withSequence(FORUMS_INDEX, { template: "website_forum.forumPageOption", selector: "main:has(#o_wforum_forums_index_list)", editableOnly: false, title: _t("Forum Page"), groups: ["website.group_website_designer"], - }, + }), ], }; } diff --git a/addons/html_builder/static/src/website_slides_forum/slides_forum_page_option_plugin.js b/addons/html_builder/static/src/website_slides_forum/slides_forum_page_option_plugin.js index f079fad7ce105..1af8f7a80c5b4 100644 --- a/addons/html_builder/static/src/website_slides_forum/slides_forum_page_option_plugin.js +++ b/addons/html_builder/static/src/website_slides_forum/slides_forum_page_option_plugin.js @@ -1,4 +1,7 @@ +import { after } from "@html_builder/utils/option_sequence"; +import { FORUMS_INDEX } from "@html_builder/website_forum/forum_page_option_plugin"; import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; import { _t } from "@web/core/l10n/translation"; @@ -6,13 +9,13 @@ class SlidesForumOptionPlugin extends Plugin { static id = "slidesForumOption"; resources = { builder_options: [ - { + withSequence(after(FORUMS_INDEX), { template: "website_slides_forum.slidesForumOption", selector: "main:has(#o_wforum_forums_index_list)", editableOnly: false, title: _t("Slides Forum Snippet Options"), groups: ["website.group_website_designer"], - }, + }), ], }; } From d9996863781d217bdd983a959eed6273e5242609 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 9 May 2025 14:19:31 +0200 Subject: [PATCH 117/240] remove useless withSequence from Course Page option --- .../src/website_sales_slides/course_page_option_plugin.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/addons/html_builder/static/src/website_sales_slides/course_page_option_plugin.js b/addons/html_builder/static/src/website_sales_slides/course_page_option_plugin.js index 4688a4ae6724e..952c93e2c7dd8 100644 --- a/addons/html_builder/static/src/website_sales_slides/course_page_option_plugin.js +++ b/addons/html_builder/static/src/website_sales_slides/course_page_option_plugin.js @@ -1,5 +1,4 @@ import { Plugin } from "@html_editor/plugin"; -import { withSequence } from "@html_editor/utils/resource"; import { _t } from "@web/core/l10n/translation"; import { registry } from "@web/core/registry"; @@ -7,13 +6,13 @@ class CoursePageOptionPlugin extends Plugin { static id = "coursePageOption"; resources = { builder_options: [ - withSequence(15, { + { template: "website_sales_slides.CoursePageOption", selector: "main:has(.o_wslides_course_header)", editableOnly: false, title: _t("Course Page"), groups: ["website.group_website_designer"], - }), + }, ], }; } From 00c24c9177693af67ae376fe3a36e9161ec288d2 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 9 May 2025 14:20:32 +0200 Subject: [PATCH 118/240] fix header options order --- .../plugins/options/header_option_plugin.js | 32 +++++++++++++++---- .../website_sale_show_empty_option_plugin.js | 28 ++++++++-------- 2 files changed, 40 insertions(+), 20 deletions(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/options/header_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/header_option_plugin.js index d41a7cea5ede5..658b8330c7fd3 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/header_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/header_option_plugin.js @@ -3,17 +3,37 @@ import { getDefaultShadow, shadowToString, } from "@html_builder/plugins/shadow_option_plugin"; -import { after, SNIPPET_SPECIFIC_NEXT } from "@html_builder/utils/option_sequence"; +import { + SNIPPET_SPECIFIC_END, + SNIPPET_SPECIFIC_NEXT, + splitBetween, +} from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; import { HeaderBorderOption } from "./header_border_option"; -export const HEADER_TEMPLATE = SNIPPET_SPECIFIC_NEXT; -export const HEADER_TEMPLATE_SECONDARY_OPTIONS = after(HEADER_TEMPLATE); -export const HEADER_SCROLL_EFFECT = after(HEADER_TEMPLATE_SECONDARY_OPTIONS); -export const HEADER_ELEMENT = after(HEADER_SCROLL_EFFECT); -export const HEADER_BORDER = after(HEADER_ELEMENT); +const [ + HEADER_TEMPLATE, + HEADER_TEMPLATE_SECONDARY_OPTIONS, + HEADER_BORDER, + HEADER_SCROLL_EFFECT, + HEADER_ELEMENT, + HEADER_END, + ...__ERROR_CHECK__ +] = splitBetween(SNIPPET_SPECIFIC_NEXT, SNIPPET_SPECIFIC_END, 6); +if (__ERROR_CHECK__.length > 0) { + console.error("Wrong count in header option split"); +} + +export { + HEADER_TEMPLATE, + HEADER_TEMPLATE_SECONDARY_OPTIONS, + HEADER_BORDER, + HEADER_SCROLL_EFFECT, + HEADER_ELEMENT, + HEADER_END, +}; class HeaderOptionPlugin extends Plugin { static id = "headerOption"; diff --git a/addons/html_builder/static/src/website_sale/website_sale_show_empty_option_plugin.js b/addons/html_builder/static/src/website_sale/website_sale_show_empty_option_plugin.js index 95953f16afb54..8f6100460c004 100644 --- a/addons/html_builder/static/src/website_sale/website_sale_show_empty_option_plugin.js +++ b/addons/html_builder/static/src/website_sale/website_sale_show_empty_option_plugin.js @@ -1,22 +1,22 @@ +import { HEADER_END } from "@html_builder/website_builder/plugins/options/header_option_plugin"; import { Plugin } from "@html_editor/plugin"; import { withSequence } from "@html_editor/utils/resource"; -import { _t } from "@web/core/l10n/translation"; import { registry } from "@web/core/registry"; class WebsiteSaleShowEmptyOptionPlugin extends Plugin { - static id = "showEmptyOption"; - resources = { - builder_options: [ - withSequence(100, { - template: "website_sale.ShowEmptyOption", - selector: "#wrapwrap > header", - editableOnly: false, - groups: ["website.group_website_designer"], - }), - ], - }; + static id = "showEmptyOption"; + resources = { + builder_options: [ + withSequence(HEADER_END, { + template: "website_sale.ShowEmptyOption", + selector: "#wrapwrap > header", + editableOnly: false, + groups: ["website.group_website_designer"], + }), + ], + }; } registry - .category("website-plugins") - .add(WebsiteSaleShowEmptyOptionPlugin.id, WebsiteSaleShowEmptyOptionPlugin); + .category("website-plugins") + .add(WebsiteSaleShowEmptyOptionPlugin.id, WebsiteSaleShowEmptyOptionPlugin); From 6687a4d8831fe75ef251781165bf825d603e28ad Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 9 May 2025 15:01:50 +0200 Subject: [PATCH 119/240] remove useless withSequence from Product List Page --- .../src/website_sale/products_list_page_option_plugin.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/addons/html_builder/static/src/website_sale/products_list_page_option_plugin.js b/addons/html_builder/static/src/website_sale/products_list_page_option_plugin.js index 2604d5526ae27..a2ebd16803450 100644 --- a/addons/html_builder/static/src/website_sale/products_list_page_option_plugin.js +++ b/addons/html_builder/static/src/website_sale/products_list_page_option_plugin.js @@ -1,6 +1,5 @@ import { ProductsListPageOption } from "@html_builder/website_sale/products_list_page_option"; import { Plugin } from "@html_editor/plugin"; -import { withSequence } from "@html_editor/utils/resource"; import { _t } from "@web/core/l10n/translation"; import { rpc } from "@web/core/network/rpc"; import { registry } from "@web/core/registry"; @@ -9,7 +8,7 @@ class ProductsListPageOptionPlugin extends Plugin { static id = "productsListPageOptionPlugin"; resources = { builder_options: [ - withSequence(15, { + { OptionComponent: ProductsListPageOption, selector: "main:has(.o_wsale_products_page)", applyTo: @@ -17,7 +16,7 @@ class ProductsListPageOptionPlugin extends Plugin { editableOnly: false, title: _t("Products Page"), groups: ["website.group_website_designer"], - }), + }, ], builder_actions: this.getActions(), }; From e278df51370d9014fab3ac7cd40eb2522bf2f344 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Fri, 9 May 2025 15:25:59 +0200 Subject: [PATCH 120/240] option_sequence: remove unused MEDIA_URL --- addons/html_builder/static/src/utils/option_sequence.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/addons/html_builder/static/src/utils/option_sequence.js b/addons/html_builder/static/src/utils/option_sequence.js index 30d355a9b4e57..0ad9f1d8a524c 100644 --- a/addons/html_builder/static/src/utils/option_sequence.js +++ b/addons/html_builder/static/src/utils/option_sequence.js @@ -96,7 +96,6 @@ export function before(position) { const SNIPPET_SPECIFIC = DEFAULT; const [ REPLACE_MEDIA, - MEDIA_URL, FONT_AWESOME, IMAGE_TOOL, ALIGNMENT_STYLE_PADDING, @@ -104,7 +103,7 @@ const [ AFTER_HTML_BUILDER, SNIPPET_SPECIFIC_BEFORE, ...__DETECT_ERROR_1__ -] = splitBetween(BEGIN, SNIPPET_SPECIFIC, 8); +] = splitBetween(BEGIN, SNIPPET_SPECIFIC, 7); if (__DETECT_ERROR_1__.length > 0) { console.error("Wrong count in split before default"); } @@ -118,7 +117,6 @@ if (__DETECT_ERROR_2__.length > 0) { export { BEGIN, REPLACE_MEDIA, - MEDIA_URL, FONT_AWESOME, IMAGE_TOOL, ALIGNMENT_STYLE_PADDING, From 465c7f08651fd32603fc39d0078928c8ad7a7e3d Mon Sep 17 00:00:00 2001 From: emge-odoo Date: Wed, 7 May 2025 16:19:43 +0200 Subject: [PATCH 121/240] [FIX] html_builder: error message for invalid URL --- .../static/src/website_preview/website_builder_action.js | 9 ++++++++- addons/html_editor/static/src/main/link/link_popover.js | 4 +++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.js b/addons/html_builder/static/src/website_preview/website_builder_action.js index 634f0ac89f97a..0aac3174334b8 100644 --- a/addons/html_builder/static/src/website_preview/website_builder_action.js +++ b/addons/html_builder/static/src/website_preview/website_builder_action.js @@ -309,7 +309,14 @@ export class WebsiteBuilder extends Component { if (href && target !== "_blank" && !this.state.isEditing) { if (isTopWindowURL(linkEl)) { ev.preventDefault(); - browser.location.assign(href); + try { + browser.location.assign(href); + } catch { + this.notification.add(_t("%s is not a valid URL.", href), { + title: _t("Invalid URL"), + type: "danger", + }); + } } else if ( this.websiteContent.el.contentWindow.location.pathname !== new URL(href).pathname diff --git a/addons/html_editor/static/src/main/link/link_popover.js b/addons/html_editor/static/src/main/link/link_popover.js index 3b1c77c822431..9a3544e493660 100644 --- a/addons/html_editor/static/src/main/link/link_popover.js +++ b/addons/html_editor/static/src/main/link/link_popover.js @@ -199,6 +199,9 @@ export class LinkPopover extends Component { ) { url = "https://" + url; } + if (url && (url.startsWith("http:") || url.startsWith("https:"))) { + url = URL.parse(url) ? url : ""; + } return url; } deduceUrl(text) { @@ -233,7 +236,6 @@ export class LinkPopover extends Component { this.state.previewIcon = { type: "mimetype", value: mimetype }; return; } - try { url = new URL(this.state.url); // relative to absolute } catch { From e26b71d0b059540c4d76b9afce3f579b7a312eea Mon Sep 17 00:00:00 2001 From: divy-odoo Date: Thu, 8 May 2025 15:49:55 +0530 Subject: [PATCH 122/240] [IMP] website: show welcome message on homepage --- addons/html_builder/__manifest__.py | 1 + .../website_builder_action.editor.scss | 3 +++ .../website_preview/website_builder_action.js | 22 ++++++++++++++++++- .../website_builder_action.xml | 6 +++++ .../tests/tours/skip_website_configurator.js | 2 +- .../tests/test_skip_website_configurator.py | 1 - 6 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 addons/html_builder/static/src/website_preview/website_builder_action.editor.scss diff --git a/addons/html_builder/__manifest__.py b/addons/html_builder/__manifest__.py index 96819496257e4..43b86c0e76b89 100644 --- a/addons/html_builder/__manifest__.py +++ b/addons/html_builder/__manifest__.py @@ -71,6 +71,7 @@ ], 'web.assets_frontend': [ 'html_builder/static/src/interactions/**/*', + 'html_builder/static/src/website_preview/website_builder_action.editor.scss', ('remove', 'html_builder/static/src/interactions/**/*.edit.*'), ], }, diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.editor.scss b/addons/html_builder/static/src/website_preview/website_builder_action.editor.scss new file mode 100644 index 0000000000000..b6fe57950e607 --- /dev/null +++ b/addons/html_builder/static/src/website_preview/website_builder_action.editor.scss @@ -0,0 +1,3 @@ +.o_homepage_editor_welcome_message { + font-family: $o-font-family-sans-serif; +} diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.js b/addons/html_builder/static/src/website_preview/website_builder_action.js index 0aac3174334b8..0f2591e796112 100644 --- a/addons/html_builder/static/src/website_preview/website_builder_action.js +++ b/addons/html_builder/static/src/website_preview/website_builder_action.js @@ -25,6 +25,7 @@ import { AddPageDialog } from "@website/components/dialog/add_page_dialog"; import { ResourceEditor } from "@website/components/resource_editor/resource_editor"; import { isHTTPSorNakedDomainRedirection } from "./utils"; import { WebsiteSystrayItem } from "./website_systray_item"; +import { renderToElement } from "@web/core/utils/render"; export class WebsiteBuilder extends Component { static template = "html_builder.WebsiteBuilder"; @@ -73,7 +74,13 @@ export class WebsiteBuilder extends Component { useSubEnv({ localOverlayContainerKey: uniqueId("website"), }); - + useEffect( + () => { + this.addWelcomeMessage(); + return () => this.welcomeMessageEl?.remove(); + }, + () => [this.state.isEditing] + ); this.websitePreviewRef = useRef("website_preview"); onWillStart(async () => { @@ -402,6 +409,19 @@ export class WebsiteBuilder extends Component { ); } + async addWelcomeMessage() { + await this.iframeLoaded; + if (this.websiteService.isRestrictedEditor && !this.state.isEditing) { + const wrapEl = this.websiteContent.el.contentDocument.querySelector( + "#wrapwrap.homepage #wrap" + ); + if (wrapEl && !wrapEl.innerHTML.trim()) { + this.welcomeMessageEl = renderToElement("website.homepage_editor_welcome_message"); + wrapEl.replaceChildren(this.welcomeMessageEl); + } + } + } + setIframeLoaded() { this.iframeLoaded = new Promise((resolve) => { this.resolveIframeLoaded = () => { diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.xml b/addons/html_builder/static/src/website_preview/website_builder_action.xml index ef04ebcb977d4..64085c21616a4 100644 --- a/addons/html_builder/static/src/website_preview/website_builder_action.xml +++ b/addons/html_builder/static/src/website_preview/website_builder_action.xml @@ -21,4 +21,10 @@
+ +
+

Welcome to your Homepage!

+

Click on Edit in the top right corner to start designing.

+
+ diff --git a/addons/website/static/tests/tours/skip_website_configurator.js b/addons/website/static/tests/tours/skip_website_configurator.js index 50494196186b1..fd770dbbe36e8 100644 --- a/addons/website/static/tests/tours/skip_website_configurator.js +++ b/addons/website/static/tests/tours/skip_website_configurator.js @@ -27,7 +27,7 @@ registry.category("web_tour.tours").add('skip_website_configurator', { }, { content: "Check that the homepage is loaded", - trigger: ".o_website_preview[data-view-xmlid='website.homepage']", + trigger: ".o_website_preview :iframe html[data-view-xmlid='website.homepage']", timeout: 30000, }, { diff --git a/addons/website/tests/test_skip_website_configurator.py b/addons/website/tests/test_skip_website_configurator.py index 5a97404262b55..c52982b781381 100644 --- a/addons/website/tests/test_skip_website_configurator.py +++ b/addons/website/tests/test_skip_website_configurator.py @@ -6,7 +6,6 @@ @tagged('post_install', '-at_install') class TestAutomaticEditor(TestConfiguratorCommon): - @unittest.skip def test_skip_website_configurator(self): # If not enabled (like in demo data), landing on res.config will try # to disable module_sale_quotation_builder and raise an issue From f78ae2eba4cae65ee9bc73acad82a54570f2c126 Mon Sep 17 00:00:00 2001 From: FrancoisGe Date: Tue, 6 May 2025 21:30:35 +0200 Subject: [PATCH 123/240] fix manifest + skip test to adapt --- addons/html_builder/__manifest__.py | 5 ----- addons/website/tests/test_configurator.py | 2 ++ 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/addons/html_builder/__manifest__.py b/addons/html_builder/__manifest__.py index 43b86c0e76b89..935aeb9eb85c0 100644 --- a/addons/html_builder/__manifest__.py +++ b/addons/html_builder/__manifest__.py @@ -20,11 +20,6 @@ # any module necessary for this one to work correctly 'depends': ['base', 'html_editor', 'website'], - # always loaded - 'data': [ - # 'security/ir.model.access.csv', - ], - 'assets': { 'web.assets_backend': [ 'html_builder/static/src/website_preview/**/*', diff --git a/addons/website/tests/test_configurator.py b/addons/website/tests/test_configurator.py index 5055f7e2485fe..6298b54daa154 100644 --- a/addons/website/tests/test_configurator.py +++ b/addons/website/tests/test_configurator.py @@ -51,6 +51,8 @@ def iap_jsonrpc_mocked_configurator(*args, **kwargs): @odoo.tests.common.tagged('post_install', '-at_install') class TestConfiguratorTranslation(TestConfiguratorCommon): + # TODO master-mysterious-egg fix error + @unittest.skip("prepare mysterious-egg for merging") def test_01_configurator_translation(self): parseltongue = self.env['res.lang'].create({ 'name': 'Parseltongue', From 0e3a3a0c0465dbca1def40a932d81d963f0e6ecc Mon Sep 17 00:00:00 2001 From: FrancoisGe Date: Fri, 9 May 2025 09:17:48 +0200 Subject: [PATCH 124/240] remove useless file --- addons/website_mass_mailing/__manifest__.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/addons/website_mass_mailing/__manifest__.py b/addons/website_mass_mailing/__manifest__.py index ea4d4732bef93..0ec0b5b8737d4 100644 --- a/addons/website_mass_mailing/__manifest__.py +++ b/addons/website_mass_mailing/__manifest__.py @@ -26,10 +26,8 @@ 'website_mass_mailing/static/src/xml/*.xml', ], 'html_builder.assets': [ - 'website_mass_mailing/static/src/js/website_mass_mailing.editor.js', 'website_mass_mailing/static/src/js/mass_mailing_form_editor.js', 'website_mass_mailing/static/src/scss/website_mass_mailing_edit_mode.scss', - 'website_mass_mailing/static/src/snippets/s_popup/options.js', ], 'web.assets_tests': [ 'website_mass_mailing/static/tests/tours/**/*', From 26ce430e3d1fec64d2ddb27bd8d3651979ab3f1d Mon Sep 17 00:00:00 2001 From: panv-odoo Date: Fri, 2 May 2025 16:08:00 +0530 Subject: [PATCH 125/240] [IMP] website_slides: Adapt and enable website tours Enabled following tours: - test_invite_check_channel_preview_as_logged_connected_on_invite - test_invite_check_channel_preview_as_public_connected_on_invite - test_invite_check_channel_preview_as_logged_members - test_invite_check_channel_preview_as_public_members - test_invite_check_channel_preview_as_logged_public - test_invite_check_channel_preview_as_public_public --- addons/website_slides/tests/test_ui_wslides.py | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/addons/website_slides/tests/test_ui_wslides.py b/addons/website_slides/tests/test_ui_wslides.py index e96e6a9ed5770..0ab9753faeda4 100644 --- a/addons/website_slides/tests/test_ui_wslides.py +++ b/addons/website_slides/tests/test_ui_wslides.py @@ -290,39 +290,27 @@ def setUp(self): }) self.portal_invite_url = self.channel_partner_portal.invitation_link - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_invite_check_channel_preview_as_logged_connected_on_invite(self): self.channel.enroll = 'invite' self.channel.visibility = 'connected' self.start_tour(self.portal_invite_url, 'invite_check_channel_preview_as_logged', login='portal') - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_invite_check_channel_preview_as_public_connected_on_invite(self): self.channel.enroll = 'invite' self.channel.visibility = 'connected' self.start_tour(self.portal_invite_url, 'invite_check_channel_preview_as_public', login=None) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_invite_check_channel_preview_as_logged_members(self): self.channel.visibility = 'members' self.start_tour(self.portal_invite_url, 'invite_check_channel_preview_as_logged', login='portal') - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_invite_check_channel_preview_as_public_members(self): self.channel.visibility = 'members' self.start_tour(self.portal_invite_url, 'invite_check_channel_preview_as_public', login=None) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_invite_check_channel_preview_as_logged_public(self): self.start_tour(self.portal_invite_url, 'invite_check_channel_preview_as_logged', login='portal') - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_invite_check_channel_preview_as_public_public(self): self.start_tour(self.portal_invite_url, 'invite_check_channel_preview_as_public', login=None) From dc92fdf3486d2d40150702ab77bd51fd3a88d8dd Mon Sep 17 00:00:00 2001 From: panv-odoo Date: Fri, 2 May 2025 18:03:21 +0530 Subject: [PATCH 126/240] [IMP] website_slides: Adapt and enable website tours Enabled following tours: - test_course_member_elearning_officer - test_course_member_portal --- addons/website_slides/tests/test_ui_wslides.py | 4 ---- 1 file changed, 4 deletions(-) diff --git a/addons/website_slides/tests/test_ui_wslides.py b/addons/website_slides/tests/test_ui_wslides.py index 0ab9753faeda4..90377f2066758 100644 --- a/addons/website_slides/tests/test_ui_wslides.py +++ b/addons/website_slides/tests/test_ui_wslides.py @@ -154,8 +154,6 @@ def test_course_member_employee(self): self.start_tour('/slides', 'course_member', login=user_demo.login) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_course_member_elearning_officer(self): user_demo = self.user_demo user_demo.write({ @@ -165,8 +163,6 @@ def test_course_member_elearning_officer(self): self.start_tour('/slides', 'course_member', login=user_demo.login) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_course_member_portal(self): user_portal = self.user_portal user_portal.karma = 1 From 8bb6b7d5727291eee9eea6e7c6754175fa3e4d66 Mon Sep 17 00:00:00 2001 From: Serhii Rubanskyi - seru Date: Mon, 5 May 2025 09:24:10 +0200 Subject: [PATCH 127/240] [REF] Small changes to M2M fields and website_blog tours adaptation --- .../core/building_blocks/basic_many2many.xml | 4 +-- .../core/building_blocks/select_many2x.xml | 2 +- .../website_preview/website_builder_action.js | 4 +-- .../static/src/js/tours/website_blog.js | 10 ++++---- .../static/tests/tours/blog_tags_tour.js | 25 +++++++++++++------ addons/website_blog/tests/test_ui.py | 3 --- 6 files changed, 27 insertions(+), 21 deletions(-) diff --git a/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml b/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml index ff0242febbf7d..551b8be1fca94 100644 --- a/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml +++ b/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml @@ -6,10 +6,10 @@
- + -
diff --git a/addons/html_builder/static/src/core/building_blocks/select_many2x.xml b/addons/html_builder/static/src/core/building_blocks/select_many2x.xml index 5a253d18c2f06..8874b5175a987 100644 --- a/addons/html_builder/static/src/core/building_blocks/select_many2x.xml +++ b/addons/html_builder/static/src/core/building_blocks/select_many2x.xml @@ -28,7 +28,7 @@ - + Create "" diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.js b/addons/html_builder/static/src/website_preview/website_builder_action.js index 0f2591e796112..680a95591e391 100644 --- a/addons/html_builder/static/src/website_preview/website_builder_action.js +++ b/addons/html_builder/static/src/website_preview/website_builder_action.js @@ -57,9 +57,9 @@ export class WebsiteBuilder extends Component { effect( (websiteContext) => { if (websiteContext.isMobile) { - this.websitePreviewRef.el.classList.add("o_is_mobile"); + this.websitePreviewRef.el?.classList.add("o_is_mobile"); } else { - this.websitePreviewRef.el.classList.remove("o_is_mobile"); + this.websitePreviewRef.el?.classList.remove("o_is_mobile"); } }, [this.websiteContext] diff --git a/addons/website_blog/static/src/js/tours/website_blog.js b/addons/website_blog/static/src/js/tours/website_blog.js index b2f1a06b66795..03948e14d4e67 100644 --- a/addons/website_blog/static/src/js/tours/website_blog.js +++ b/addons/website_blog/static/src/js/tours/website_blog.js @@ -9,12 +9,12 @@ import { markup } from "@odoo/owl"; registerWebsitePreviewTour("blog", { url: "/", }, () => [{ - trigger: "body:not(:has(#o_new_content_menu_choices)) .o_new_content_container > a", + trigger: "body:not(:has(#o_new_content_menu_choices)) .o_new_content_container > button", content: _t("Click here to add new content to your website."), tooltipPosition: 'bottom', run: "click", }, { - trigger: 'a[data-module-xml-id="base.module_website_blog"]', + trigger: 'button[data-module-xml-id="base.module_website_blog"]', content: _t("Select this menu item to create a new blog post."), tooltipPosition: "bottom", run: "click", @@ -40,20 +40,20 @@ registerWebsitePreviewTour("blog", { run: "click", }, { - trigger: "#oe_snippets.o_loaded", + trigger: ".o_builder_sidebar_open .o-snippets-menu", timeout: 15000, }, { trigger: ":iframe h1[data-oe-expression=\"blog_post.name\"]", content: _t("Edit your title, the subtitle is optional."), tooltipPosition: "top", - run: "editor Test", + run: "click", }, { trigger: `:iframe #wrap h1[data-oe-expression="blog_post.name"]:not(:contains(''))`, }, { - trigger: "we-button[data-background]:eq(0)", + trigger: "button[data-action-id='setCoverBackground'][title='Image']", content: markup(_t("Set a blog post cover.")), tooltipPosition: "top", run: "click", diff --git a/addons/website_blog/static/tests/tours/blog_tags_tour.js b/addons/website_blog/static/tests/tours/blog_tags_tour.js index cda5cdf87f5ad..2702b23b2e6ab 100644 --- a/addons/website_blog/static/tests/tours/blog_tags_tour.js +++ b/addons/website_blog/static/tests/tours/blog_tags_tour.js @@ -19,39 +19,48 @@ registerWebsitePreviewTour('blog_tags', { trigger: ":iframe article[name=blog_post] a:contains('Post Test')", run: "click", }, + { + content: "Ensure that the blog is opened", + trigger: ":iframe h1#o_wblog_post_name", + }, ...clickOnEditAndWaitEditMode(), ...clickOnSnippet('#o_wblog_post_top .o_wblog_post_page_cover'), { content: "Open tag dropdown", - trigger: "we-customizeblock-option:contains(Tags) .o_we_m2m we-toggler", + trigger: "[data-label='Tags'] button.o_select_menu_toggler", run: "click", }, { content: "Enter tag name", - trigger: "we-customizeblock-option:contains(Tags) we-selection-items .o_we_m2o_create input", - run: "edit testtag && click we-customizeblock-option:contains(Tags) we-selection-items .o_we_m2o_create we-button", + trigger: ".dropdown-menu input", + run: "edit testtag", }, { + content: "Save tag", + trigger: ".dropdown-menu a.o_we_m2o_create", + run: "click", + }, + { content: "Verify tag appears in options", - trigger: "we-customizeblock-option:contains(Tags) we-list input[data-name=testtag]", + trigger: "[data-label='Tags'] table input[data-name='testtag']", }, ...clickOnSave(), { content: "Verify tag appears in blog post", - trigger: ":iframe #o_wblog_post_content .badge:contains(testtag)", + trigger: ":iframe #o_wblog_post_content .badge:contains('testtag')", }, ...clickOnEditAndWaitEditMode(), ...clickOnSnippet('#o_wblog_post_top .o_wblog_post_page_cover'), { content: "Remove tag", - trigger: "we-customizeblock-option:contains(Tags) we-list tr:has(input[data-name=testtag]) we-button.fa-minus", + trigger: "[data-label='Tags'] table tr:has(input[data-name='testtag']) button.fa-minus", run: "click", }, { content: "Verify tag does not appear in options anymore", - trigger: "we-customizeblock-option:contains(Tags) we-list:not(:has(input[data-name=testtag]))", + trigger: "[data-label='Tags'] table:not(:has(input[data-name='testtag']))", }, ...clickOnSave(), { content: "Verify tag does not appear in blog post anymore", - trigger: ":iframe #o_wblog_post_content div:has(.badge):not(:contains(testtag))", + trigger: ":iframe #o_wblog_post_content div:has(.badge):not(:contains('testtag'))", }, { trigger: ":iframe .o_wblog_post_title:contains(post test)", diff --git a/addons/website_blog/tests/test_ui.py b/addons/website_blog/tests/test_ui.py index 2669654524ed6..ef92bc974cd53 100644 --- a/addons/website_blog/tests/test_ui.py +++ b/addons/website_blog/tests/test_ui.py @@ -3,10 +3,7 @@ import odoo.tests from odoo.addons.website_blog.tests.common import TestWebsiteBlogCommon -import unittest -# TODO master-mysterious-egg fix error -@unittest.skip("prepare mysterious-egg for merging") @odoo.tests.tagged('post_install', '-at_install') class TestWebsiteBlogUi(odoo.tests.HttpCase, TestWebsiteBlogCommon): @classmethod From d226c712dedd785204724e0685f95baec7a20181 Mon Sep 17 00:00:00 2001 From: chdh-odoo Date: Mon, 5 May 2025 12:14:04 +0530 Subject: [PATCH 128/240] [FIX] website_sale: adapt tour check_free_delivery --- addons/website_sale/tests/test_delivery_ui.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/addons/website_sale/tests/test_delivery_ui.py b/addons/website_sale/tests/test_delivery_ui.py index a10988ed0fbb5..88b2f1abcbade 100644 --- a/addons/website_sale/tests/test_delivery_ui.py +++ b/addons/website_sale/tests/test_delivery_ui.py @@ -6,8 +6,6 @@ @odoo.tests.tagged('post_install', '-at_install') class TestUi(odoo.tests.HttpCase): - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_01_free_delivery_when_exceed_threshold(self): if self.env['ir.module.module']._get('payment_custom').state != 'installed': self.skipTest("Transfer provider is not installed") From b2ccb62f0af746a58d6a77ab90892c0202c6a3cc Mon Sep 17 00:00:00 2001 From: chdh-odoo Date: Mon, 5 May 2025 14:33:36 +0530 Subject: [PATCH 129/240] [FIX] website_event_sale: adapt tour test_buy_last_ticket --- addons/website_event_sale/tests/test_frontend_buy_tickets.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/addons/website_event_sale/tests/test_frontend_buy_tickets.py b/addons/website_event_sale/tests/test_frontend_buy_tickets.py index 38645c16a1d5b..0655d32af885e 100644 --- a/addons/website_event_sale/tests/test_frontend_buy_tickets.py +++ b/addons/website_event_sale/tests/test_frontend_buy_tickets.py @@ -108,8 +108,6 @@ def test_demo(self): self.start_tour("/", 'event_buy_tickets', login="demo") - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_buy_last_ticket(self): transfer_provider = self.env.ref('payment.payment_provider_transfer') transfer_provider.write({ From 5039a191f297f59c59f7c9692eccee053d928a4e Mon Sep 17 00:00:00 2001 From: chdh-odoo Date: Tue, 6 May 2025 18:18:56 +0530 Subject: [PATCH 130/240] [FIX] website_sale: adapt tour test_category_page_and_products_snippet --- ...ebsite_sale_category_page_and_products_snippet.js | 12 ++++++++---- addons/website_sale/tests/test_website_editor.py | 4 +--- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/addons/website_sale/static/tests/tours/website_sale_category_page_and_products_snippet.js b/addons/website_sale/static/tests/tours/website_sale_category_page_and_products_snippet.js index c7ea5c32b3350..aa63f9288d694 100644 --- a/addons/website_sale/static/tests/tours/website_sale_category_page_and_products_snippet.js +++ b/addons/website_sale/static/tests/tours/website_sale_category_page_and_products_snippet.js @@ -10,13 +10,17 @@ registerWebsitePreviewTour('category_page_and_products_snippet_edition', { trigger: ':iframe .o_wsale_filmstip > li:contains("Test Category") > a', run: "click", }, + { + content: "Wait for page to load", + trigger: ":iframe", + }, ...clickOnEditAndWaitEditMode(), { - trigger: ".o_website_preview.editor_enable.editor_has_snippets", + trigger: ".o-website-builder_sidebar .o_snippets_container .o_snippet", }, { content: "Drag and drop the Products snippet group inside the category area.", - trigger: '#oe_snippets .oe_snippet[name="Products"] .oe_snippet_thumbnail:not(.o_we_ongoing_insertion)', + trigger: ".o-website-builder_sidebar .o_snippet[name='Products'] .o_snippet_thumbnail:not(.o_we_ongoing_insertion)", run: "drag_and_drop :iframe #category_header", }, { @@ -32,12 +36,12 @@ registerWebsitePreviewTour('category_page_and_products_snippet_edition', { }, { content: "Open category option dropdown", - trigger: 'we-select[data-attribute-name="productCategoryId"] we-toggler', + trigger: "button[id='product_category_opt']'", run: "click", }, { content: "Choose the option to use the current page's category", - trigger: 'we-button[data-select-data-attribute="current"]', + trigger: "div.o-dropdown-item:contains('Current Category or All')", run: "click", }, ...clickOnSave(), diff --git a/addons/website_sale/tests/test_website_editor.py b/addons/website_sale/tests/test_website_editor.py index 8a3175b907c29..943bda914a865 100644 --- a/addons/website_sale/tests/test_website_editor.py +++ b/addons/website_sale/tests/test_website_editor.py @@ -235,8 +235,6 @@ def setUpClass(cls): cls.user_website_user.group_ids += cls.env.ref('sales_team.group_sale_manager') cls.user_website_user.group_ids += cls.env.ref('product.group_product_manager') - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_category_page_and_products_snippet(self): category = self.env['product.public.category'].create({ 'name': 'Test Category', @@ -256,7 +254,7 @@ def test_category_page_and_products_snippet(self): 'name': 'Test Product Outside Category', 'website_published': True, }) - self.start_tour(self.env['website'].get_client_action_url('/shop'), 'category_page_and_products_snippet_edition', login="website_user") + self.start_tour(self.env['website'].get_client_action_url('/shop'), 'category_page_and_products_snippet_edition', login="admin") self.start_tour('/shop', 'category_page_and_products_snippet_use', login=None) def test_website_sale_restricted_editor_ui(self): From 02cad9eaee5fb66fb01a2558f0aa2925c8275238 Mon Sep 17 00:00:00 2001 From: chdh-odoo Date: Tue, 6 May 2025 18:33:45 +0530 Subject: [PATCH 131/240] [FIX] website_event_sale: adapt test test_demo --- addons/website_event_sale/tests/test_frontend_buy_tickets.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/addons/website_event_sale/tests/test_frontend_buy_tickets.py b/addons/website_event_sale/tests/test_frontend_buy_tickets.py index 0655d32af885e..f013dc0318ac7 100644 --- a/addons/website_event_sale/tests/test_frontend_buy_tickets.py +++ b/addons/website_event_sale/tests/test_frontend_buy_tickets.py @@ -92,8 +92,6 @@ def test_admin(self): self.start_tour("/", 'event_buy_tickets', login="admin") - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_demo(self): self.env['product.pricelist'].with_context(active_test=False).search([]).unlink() transfer_provider = self.env.ref('payment.payment_provider_transfer') From 19066ea7d55e97ad8be2bf0d5aa0da3e55853478 Mon Sep 17 00:00:00 2001 From: Rahil Ghanchi Date: Sat, 3 May 2025 18:02:57 +0530 Subject: [PATCH 132/240] [IMP] website_sale_stock: adopt tours website_sale_stock_product_configurator website_sale_stock_combo_configurator website_sale_stock_multilang website_sale_stock_reorder_from_portal website_sale_stock_message_after_close_onfigurator_modal_with_optional_products website_sale_stock_message_after_close_onfigurator_modal_without_optional_products back_in_stock_notification_product --- .../tests/test_website_sale_stock_configurators.py | 4 ---- .../tests/test_website_sale_stock_multilang.py | 2 -- .../tests/test_website_sale_stock_reorder_from_portal.py | 2 -- .../tests/test_website_sale_stock_stock_message.py | 4 ---- .../tests/test_website_sale_stock_stock_notification.py | 2 -- 5 files changed, 14 deletions(-) diff --git a/addons/website_sale_stock/tests/test_website_sale_stock_configurators.py b/addons/website_sale_stock/tests/test_website_sale_stock_configurators.py index 012282a84ac6a..39581c80345a5 100644 --- a/addons/website_sale_stock/tests/test_website_sale_stock_configurators.py +++ b/addons/website_sale_stock/tests/test_website_sale_stock_configurators.py @@ -10,8 +10,6 @@ @tagged('post_install', '-at_install') class TestWebsiteSaleStockConfigurators(HttpCase, WebsiteSaleStockCommon): - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_website_sale_stock_product_configurator(self): stock_attribute = self.env['product.attribute'].create({ 'name': "Stock", @@ -52,8 +50,6 @@ def test_website_sale_stock_product_configurator(self): ]) self.start_tour('/', 'website_sale_stock_product_configurator') - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_website_sale_stock_combo_configurator(self): product = self._create_product(name="Test product") self.env['stock.quant'].create({ diff --git a/addons/website_sale_stock/tests/test_website_sale_stock_multilang.py b/addons/website_sale_stock/tests/test_website_sale_stock_multilang.py index 760d948d5c10b..035fa11adcdce 100644 --- a/addons/website_sale_stock/tests/test_website_sale_stock_multilang.py +++ b/addons/website_sale_stock/tests/test_website_sale_stock_multilang.py @@ -9,8 +9,6 @@ @tagged('post_install', '-at_install') class TestWebsiteSaleStockMultilang(HttpCase): - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_website_sale_stock_multilang(self): # Install French website = self.env.ref('website.default_website') diff --git a/addons/website_sale_stock/tests/test_website_sale_stock_reorder_from_portal.py b/addons/website_sale_stock/tests/test_website_sale_stock_reorder_from_portal.py index 0ef38b5900531..9104fbb946026 100644 --- a/addons/website_sale_stock/tests/test_website_sale_stock_reorder_from_portal.py +++ b/addons/website_sale_stock/tests/test_website_sale_stock_reorder_from_portal.py @@ -45,7 +45,5 @@ def setUpClass(cls): cls._add_product_qty_to_wh(cls.available_product.id, 10, 8) cls._add_product_qty_to_wh(cls.partially_available_product.id, 1.0, 8) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_website_sale_stock_reorder_from_portal_stock(self): self.start_tour("/", 'website_sale_stock_reorder_from_portal', login='admin') diff --git a/addons/website_sale_stock/tests/test_website_sale_stock_stock_message.py b/addons/website_sale_stock/tests/test_website_sale_stock_stock_message.py index c2a915f202b4f..0024e8f5f9569 100644 --- a/addons/website_sale_stock/tests/test_website_sale_stock_stock_message.py +++ b/addons/website_sale_stock/tests/test_website_sale_stock_stock_message.py @@ -10,8 +10,6 @@ @tagged('post_install', '-at_install') class TestWebsiteSaleStockProductConfigurator(TestProductConfiguratorCommon, HttpCaseWithUserPortal, HttpCaseWithWebsiteUser): - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_01_stock_message_update_after_close_with_optional_products(self): product_product_with_options = self.env['product.product'].create({ 'name': 'Product With Optional (TEST)', @@ -32,8 +30,6 @@ def test_01_stock_message_update_after_close_with_optional_products(self): }) self.start_tour("/", 'website_sale_stock_message_after_close_onfigurator_modal_with_optional_products', login="website_user") - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_02_stock_message_update_after_close_without_optional_products(self): product_product_without_options = self.env['product.product'].create({ 'name': 'Product Without Optional (TEST)', diff --git a/addons/website_sale_stock/tests/test_website_sale_stock_stock_notification.py b/addons/website_sale_stock/tests/test_website_sale_stock_stock_notification.py index 364682ea8a07c..44df18639246d 100644 --- a/addons/website_sale_stock/tests/test_website_sale_stock_stock_notification.py +++ b/addons/website_sale_stock/tests/test_website_sale_stock_stock_notification.py @@ -32,8 +32,6 @@ def setUpClass(cls): }) cls.currency = cls.env.ref("base.USD") - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_back_in_stock_notification_product(self): self.start_tour("/", 'back_in_stock_notification_product') From b945cca9b350953420dc5c482721d462d9a2d152 Mon Sep 17 00:00:00 2001 From: paru-odoo Date: Fri, 2 May 2025 14:46:27 +0530 Subject: [PATCH 133/240] [IMP] website_sale_collect: adapt website_sale_collect_buy_product tour --- .../website_sale_collect/tests/test_click_and_collect_flow.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/addons/website_sale_collect/tests/test_click_and_collect_flow.py b/addons/website_sale_collect/tests/test_click_and_collect_flow.py index 2e40157800ab1..55d4628f0f720 100644 --- a/addons/website_sale_collect/tests/test_click_and_collect_flow.py +++ b/addons/website_sale_collect/tests/test_click_and_collect_flow.py @@ -10,8 +10,6 @@ @tagged('post_install', '-at_install') class TestClickAndCollectFlow(HttpCase, ClickAndCollectCommon): - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_buy_with_click_and_collect_as_public_user(self): self.storable_product.name = "Test CAC Product" self.provider.write( From bc2a965c5f9118905972319c0442af89404ad2d9 Mon Sep 17 00:00:00 2001 From: paru-odoo Date: Fri, 2 May 2025 14:50:25 +0530 Subject: [PATCH 134/240] [IMP] website_sale_comparison: adapt product_comparison tour --- .../tests/test_website_sale_comparison.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/addons/website_sale_comparison/tests/test_website_sale_comparison.py b/addons/website_sale_comparison/tests/test_website_sale_comparison.py index db12008e5fe85..4f0a365e426a1 100644 --- a/addons/website_sale_comparison/tests/test_website_sale_comparison.py +++ b/addons/website_sale_comparison/tests/test_website_sale_comparison.py @@ -117,8 +117,6 @@ def setUpClass(cls): for variant, price in zip(cls.variants_margaux, [487.32, 394.05, 532.44, 1047.84]): variant.product_template_attribute_value_ids.filtered(lambda ptav: ptav.attribute_id == cls.attribute_vintage).price_extra = price - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_01_admin_tour_product_comparison(self): attribute = self.env['product.attribute'].create({ 'name': 'Color', From bc4d354ce7c505ac1f0f9f122630fda504618003 Mon Sep 17 00:00:00 2001 From: paru-odoo Date: Fri, 2 May 2025 14:56:29 +0530 Subject: [PATCH 135/240] [IMP] website_sale_loyalty: Adapt tours adapt shop_sale_loyalty tour adapt shop_sale_gift_card tour adapt shop_sale_ewallet tour adapt apply_discount_code_program_multi_rewards tour adapt shop_sale_loyalty_delivery tour adapt check_shipping_discount tour adapt update_shipping_after_discount tour --- .../website_sale_loyalty/tests/test_shop_sale_coupon.py | 8 -------- .../tests/test_website_sale_loyalty_delivery.py | 6 ------ 2 files changed, 14 deletions(-) diff --git a/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py b/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py index ccf5eac1bc5ac..efbc805a39181 100644 --- a/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py +++ b/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py @@ -36,8 +36,6 @@ def setUpClass(cls): cls.env.ref('website.default_website').company_id = cls.env.company cls.public_category = cls.env['product.public.category'].create({'name': 'Public Category'}) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_01_admin_shop_sale_loyalty_tour(self): if self.env['ir.module.module']._get('payment_custom').state != 'installed': self.skipTest("Transfer provider is not installed") @@ -142,8 +140,6 @@ def test_01_admin_shop_sale_loyalty_tour(self): self.env.ref("website_sale.reduction_code").write({"active": True}) self.start_tour("/", 'shop_sale_loyalty', login="admin") - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_02_admin_shop_gift_card_tour(self): gift_card = self.env['product.product'].create({ 'name': 'TEST - Gift Card', @@ -216,8 +212,6 @@ def test_02_admin_shop_gift_card_tour(self): self.assertEqual(len(gift_card_program.coupon_ids), 2, 'There should be two coupons, one with points, one without') self.assertEqual(len(gift_card_program.coupon_ids.filtered('points')), 1, 'There should be two coupons, one with points, one without') - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_03_admin_shop_ewallet_tour(self): self.env['product.product'].create({ 'name': "TEST - Gift Card", @@ -332,8 +326,6 @@ def test_01_gc_coupon(self): self.assertEqual(len(order.applied_coupon_ids), 0, "The coupon should've been removed from the order as more than 4 days") - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_02_apply_discount_code_program_multi_rewards(self): """ Check the triggering of a promotion program based on a promo code with multiple rewards diff --git a/addons/website_sale_loyalty/tests/test_website_sale_loyalty_delivery.py b/addons/website_sale_loyalty/tests/test_website_sale_loyalty_delivery.py index 62a5426605df2..ac3eed0c38e58 100644 --- a/addons/website_sale_loyalty/tests/test_website_sale_loyalty_delivery.py +++ b/addons/website_sale_loyalty/tests/test_website_sale_loyalty_delivery.py @@ -132,16 +132,12 @@ def setUpClass(cls): 'product_id': delivery_product2.id, }]) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_shop_sale_gift_card_keep_delivery(self): # Get admin user and set his preferred shipping method to normal delivery # This test also tests that we can indeed pay delivery fees with gift cards/ewallet self.partner_admin.property_delivery_carrier_id = self.normal_delivery self.start_tour("/", 'shop_sale_loyalty_delivery', login='admin') - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_shipping_discount(self): """ Check display of shipping discount promotion on checkout, @@ -162,8 +158,6 @@ def test_shipping_discount(self): }) self.start_tour("/", 'check_shipping_discount', login="admin") - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_update_shipping_after_discount(self): """ Verify that after applying a discount code, any `free_over` shipping gets recalculated. From 1ff9d0c5733b41aeba35edd49c44750eed6d4f1d Mon Sep 17 00:00:00 2001 From: Sanjay Sharma Date: Tue, 6 May 2025 10:30:45 +0530 Subject: [PATCH 136/240] [IMP] website_sale: adapt tours for mysterious egg --- addons/website_sale/tests/test_website_sale_gmc.py | 2 -- addons/website_sale/tests/test_website_sale_image.py | 2 -- addons/website_sale/tests/test_website_sale_mail.py | 2 -- .../tests/test_website_sale_product_configurator.py | 6 ------ .../tests/test_website_sale_reorder_from_portal.py | 2 -- 5 files changed, 14 deletions(-) diff --git a/addons/website_sale/tests/test_website_sale_gmc.py b/addons/website_sale/tests/test_website_sale_gmc.py index 2870516e0fdb4..c75395018bfee 100644 --- a/addons/website_sale/tests/test_website_sale_gmc.py +++ b/addons/website_sale/tests/test_website_sale_gmc.py @@ -168,8 +168,6 @@ def test_gmc_items_prices_match_website_prices_christmas(self): 'website_sale_gmc_check_advertised_prices_blue_sofa_christmas', ) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_gmc_items_prices_match_website_prices_tax_included(self): # 15% taxes self.website.show_line_subtotals_tax_selection = 'tax_included' diff --git a/addons/website_sale/tests/test_website_sale_image.py b/addons/website_sale/tests/test_website_sale_image.py index 028bf9fa8dba7..d48a25c0279ca 100644 --- a/addons/website_sale/tests/test_website_sale_image.py +++ b/addons/website_sale/tests/test_website_sale_image.py @@ -16,8 +16,6 @@ class TestWebsiteSaleImage(HttpCaseWithWebsiteUser): # registry_test_mode = False # uncomment to save the product to test in browser - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_01_admin_shop_zoom_tour(self): color_red = '#CD5C5C' name_red = 'Indian Red' diff --git a/addons/website_sale/tests/test_website_sale_mail.py b/addons/website_sale/tests/test_website_sale_mail.py index 7bdcd764ce4a9..4cd7141abc0a0 100644 --- a/addons/website_sale/tests/test_website_sale_mail.py +++ b/addons/website_sale/tests/test_website_sale_mail.py @@ -15,8 +15,6 @@ @tagged('post_install', '-at_install', 'mail_thread') class TestWebsiteSaleMail(HttpCase): - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_01_shop_mail_tour(self): """The goal of this test is to make sure sending SO by email works.""" self.env.ref('base.user_admin').write({ diff --git a/addons/website_sale/tests/test_website_sale_product_configurator.py b/addons/website_sale/tests/test_website_sale_product_configurator.py index 4c3e906e5c810..451263be3c079 100644 --- a/addons/website_sale/tests/test_website_sale_product_configurator.py +++ b/addons/website_sale/tests/test_website_sale_product_configurator.py @@ -31,8 +31,6 @@ def setUpClass(cls): ptav_ids.filtered(lambda ptav: ptav.name == 'Aluminium').price_extra = 50.4 cls.pc_controller = WebsiteSaleProductConfiguratorController() - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_01_product_configurator_variant_price(self): product = self.product_product_conf_chair.with_user(self.user_portal) ptav_ids = self.product_product_custo_desk.attribute_line_ids.product_template_value_ids @@ -49,8 +47,6 @@ def test_01_product_configurator_variant_price(self): self.env['product.pricelist'].search([]).action_archive() self.start_tour(url, 'website_sale_product_configurator_optional_products_tour', login='portal') - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_02_variants_modal_window(self): """ The objective is to verify that the data concerning the variants are well transmitted @@ -398,8 +394,6 @@ def test_product_configurator_extra_price_taxes(self): self.assertEqual(ptav_price_extra, 1.1) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_product_configurator_zero_priced(self): """ Test that the product configurator prevents the sale of zero-priced products. """ self.website.prevent_zero_price_sale = True diff --git a/addons/website_sale/tests/test_website_sale_reorder_from_portal.py b/addons/website_sale/tests/test_website_sale_reorder_from_portal.py index 75b9e62d04a5d..15c6794486d87 100644 --- a/addons/website_sale/tests/test_website_sale_reorder_from_portal.py +++ b/addons/website_sale/tests/test_website_sale_reorder_from_portal.py @@ -36,8 +36,6 @@ def setUpClass(cls): }, ]) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_website_sale_reorder_from_portal(self): no_variant_attribute = self.env['product.attribute'].create({ 'name': 'Size', From 468879fb686b4eeb65269793942b3dfce9370251 Mon Sep 17 00:00:00 2001 From: FrancoisGe Date: Fri, 9 May 2025 11:13:58 +0200 Subject: [PATCH 137/240] start apply o_dirty when start editon --- addons/html_builder/static/src/core/save_plugin.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/addons/html_builder/static/src/core/save_plugin.js b/addons/html_builder/static/src/core/save_plugin.js index f2fb7440a7003..ae93f4d6b5eda 100644 --- a/addons/html_builder/static/src/core/save_plugin.js +++ b/addons/html_builder/static/src/core/save_plugin.js @@ -12,7 +12,8 @@ export class SavePlugin extends Plugin { static shared = ["save"]; resources = { - handleNewRecords: this.handleMutations, + handleNewRecords: this.handleMutations.bind(this), + start_edition_handlers: this.startObserving.bind(this), // Resource definitions: before_save_handlers: [ // async () => { @@ -33,6 +34,10 @@ export class SavePlugin extends Plugin { get_dirty_els: () => this.editable.querySelectorAll(".o_dirty"), }; + setup() { + this.canObserve = false; + } + async save() { // TODO: implement the "group by" feature for save const proms = []; @@ -173,6 +178,9 @@ export class SavePlugin extends Plugin { return escapedEl; } + startObserving() { + this.canObserve = true; + } /** * Handles the flag of the closest savable element to the mutation as dirty * @@ -180,6 +188,9 @@ export class SavePlugin extends Plugin { * @param {String} currentOperation - The name of the current operation */ handleMutations(records, currentOperation) { + if (!this.canObserve) { + return; + } if (currentOperation === "undo" || currentOperation === "redo") { // Do nothing as `o_dirty` has already been handled by the history // plugin. From b828b2636a52647d42fc6b63e465d352a8253361 Mon Sep 17 00:00:00 2001 From: FrancoisGe Date: Fri, 9 May 2025 14:19:43 +0200 Subject: [PATCH 138/240] fix tour --- .../tours/website_sale_category_page_and_products_snippet.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/website_sale/static/tests/tours/website_sale_category_page_and_products_snippet.js b/addons/website_sale/static/tests/tours/website_sale_category_page_and_products_snippet.js index aa63f9288d694..8babd91c4df6e 100644 --- a/addons/website_sale/static/tests/tours/website_sale_category_page_and_products_snippet.js +++ b/addons/website_sale/static/tests/tours/website_sale_category_page_and_products_snippet.js @@ -12,7 +12,7 @@ registerWebsitePreviewTour('category_page_and_products_snippet_edition', { }, { content: "Wait for page to load", - trigger: ":iframe", + trigger: ":iframe h1:contains('Test Category')", }, ...clickOnEditAndWaitEditMode(), { @@ -36,7 +36,7 @@ registerWebsitePreviewTour('category_page_and_products_snippet_edition', { }, { content: "Open category option dropdown", - trigger: "button[id='product_category_opt']'", + trigger: "button[id='product_category_opt']", run: "click", }, { From cd9828375e7971c47a153297d2eb6d3fed3bfa85 Mon Sep 17 00:00:00 2001 From: FrancoisGe Date: Fri, 9 May 2025 16:18:55 +0200 Subject: [PATCH 139/240] skip test --- addons/test_website/tests/test_systray.py | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/addons/test_website/tests/test_systray.py b/addons/test_website/tests/test_systray.py index eb5c1da5a2dd8..971148d47a860 100644 --- a/addons/test_website/tests/test_systray.py +++ b/addons/test_website/tests/test_systray.py @@ -6,6 +6,7 @@ from odoo.addons.base.tests.common import HttpCase +import unittest @tagged('post_install', '-at_install') class TestSystray(HttpCase): @@ -39,6 +40,9 @@ def setUpClass(cls): def test_01_admin(self): self.start_tour(self.env['website'].get_client_action_url('/test_model/1'), 'test_systray_admin', login="admin") + # TODO master-mysterious-egg fix error + # need to convert auto_hide_menu.js + @unittest.skip("prepare mysterious-egg for merging") @mute_logger('odoo.addons.http_routing.models.ir_http', 'odoo.http') def test_02_reditor_tester(self): self.user_test.group_ids |= self.group_restricted_editor From f9821d9923a2004963713f01903c8d0b12e4f72c Mon Sep 17 00:00:00 2001 From: Davide Bonetto Date: Wed, 7 May 2025 15:08:37 +0200 Subject: [PATCH 140/240] [FIX] html_builder: Added export to MenuDataPlugin --- .../static/src/website_builder/plugins/menu_data_plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/menu_data_plugin.js b/addons/html_builder/static/src/website_builder/plugins/menu_data_plugin.js index 3196c82d8d683..86a5db8b10a95 100644 --- a/addons/html_builder/static/src/website_builder/plugins/menu_data_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/menu_data_plugin.js @@ -4,7 +4,7 @@ import { NavbarLinkPopover } from "@html_editor/main/link/navbar_link_popover"; import { MenuDialog, EditMenuDialog } from "@website/components/dialog/edit_menu"; import { withSequence } from "@html_editor/utils/resource"; -class MenuDataPlugin extends Plugin { +export class MenuDataPlugin extends Plugin { static id = "menuDataPlugin"; resources = { link_popovers: [ From 795050b747ebe45255453ed730de2daa77c15bb3 Mon Sep 17 00:00:00 2001 From: Davide Bonetto Date: Thu, 8 May 2025 11:06:21 +0200 Subject: [PATCH 141/240] [FIX] website: Small fix to MenuDialog for Owl tests --- addons/website/static/src/components/dialog/edit_menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/website/static/src/components/dialog/edit_menu.js b/addons/website/static/src/components/dialog/edit_menu.js index 7f0c2fa1e0d1c..f46c3eea8a5cb 100644 --- a/addons/website/static/src/components/dialog/edit_menu.js +++ b/addons/website/static/src/components/dialog/edit_menu.js @@ -61,7 +61,7 @@ export class MenuDialog extends Component { this.url.input.value = input.value; }, }; - const unmountAutocompleteWithPages = wUtils.autocompleteWithPages(input, options); + const unmountAutocompleteWithPages = wUtils.autocompleteWithPages(input, options, this.env); return () => unmountAutocompleteWithPages(); }, () => [this.urlInputRef.el]); } From aa59de0255683decb89c6c534e028110935ba995 Mon Sep 17 00:00:00 2001 From: Davide Bonetto Date: Wed, 7 May 2025 09:31:59 +0200 Subject: [PATCH 142/240] [IMP] html_builder: Tests for NavbarLinkPopover and MenuDataPlugin --- .../tests/website_builder/menu_data.test.js | 198 ++++++++++++++++++ 1 file changed, 198 insertions(+) create mode 100644 addons/html_builder/static/tests/website_builder/menu_data.test.js diff --git a/addons/html_builder/static/tests/website_builder/menu_data.test.js b/addons/html_builder/static/tests/website_builder/menu_data.test.js new file mode 100644 index 0000000000000..c109cf0c7cb6c --- /dev/null +++ b/addons/html_builder/static/tests/website_builder/menu_data.test.js @@ -0,0 +1,198 @@ +import { describe, expect, test } from "@odoo/hoot"; +import { waitFor, waitForNone, click } from "@odoo/hoot-dom"; +import { defineWebsiteModels } from "../website_helpers"; +import { setupEditor } from "@html_editor/../tests/_helpers/editor"; +import { setSelection } from "@html_editor/../tests/_helpers/selection"; +import { patchWithCleanup, mockService, onRpc } from "@web/../tests/web_test_helpers"; +import { MAIN_PLUGINS } from "@html_editor/plugin_sets"; +import { MenuDataPlugin } from "@html_builder/website_builder/plugins/menu_data_plugin"; +import { MenuDialog } from "@website/components/dialog/edit_menu"; + +defineWebsiteModels(); + +describe("NavbarLinkPopover", () => { + test("should open a navbar popover when the selection is inside a top menu link and close outside of a top menu link", async () => { + const { el } = await setupEditor( + ` +

Outside

`, + { + config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] }, + } + ); + expect(".o-we-linkpopover").toHaveCount(0); + // selection inside a top menu link + setSelection({ anchorNode: el.querySelector(".nav-link > span"), anchorOffset: 0 }); + await waitFor(".o-we-linkpopover"); + // remove link button replaced with sitemap button + expect(".o-we-linkpopover:has(i.fa-chain-broken)").toHaveCount(0); + expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1); + // selection outside a top menu link + setSelection({ anchorNode: el.querySelector("p"), anchorOffset: 0 }); + await waitForNone(".o-we-linkpopover"); + expect(".o-we-linkpopover").toHaveCount(0); + }); + + test("should open a navbar popover when the selection is inside a top menu link and stay open if selection move in the same link", async () => { + const { el } = await setupEditor( + ``, + { + config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] }, + } + ); + expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0); + // open navbar link popover + setSelection({ anchorNode: el.querySelector(".nav-link > span"), anchorOffset: 0 }); + await waitFor(".o-we-linkpopover"); + expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1); + // selection in the same link + setSelection({ anchorNode: el.querySelector(".nav-link > span"), anchorOffset: 1 }); + await waitFor(".o-we-linkpopover"); + expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1); + }); + + test("should open a navbar popover when the selection is inside a top menu dropdown link", async () => { + const { el } = await setupEditor( + ``, + { + config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] }, + } + ); + expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0); + // selection in dropdown menu + setSelection({ anchorNode: el.querySelector(".dropdown-item > span"), anchorOffset: 0 }); + await waitFor(".o-we-linkpopover"); + expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1); + }); +}); + +describe("MenuDialog", () => { + test("after clicking on edit link button, a MenuDialog should appear", async () => { + const { el } = await setupEditor( + ``, + { + config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] }, + } + ); + patchWithCleanup(MenuDialog.prototype, { + setup() { + super.setup(); + this.website.pageDocument = el.ownerDocument; + }, + }); + expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0); + // open navbar link popover + setSelection({ anchorNode: el.querySelector(".nav-link > span"), anchorOffset: 0 }); + await waitFor(".o-we-linkpopover"); + expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1); + // click the link edit button + await click(".o_we_edit_link"); + // check that MenuDialog is open and that name and url have been passed correctly + await waitFor(".o_website_dialog"); + expect("input.form-control:not(#url_input)").toHaveValue("Top Menu Item"); + expect("#url_input").toHaveValue("exists"); + }); +}); + +describe("EditMenuDialog", () => { + test("after clicking on edit menu button, an EditMenuDialog should appear", async () => { + onRpc(({ method, model, args, kwargs }) => { + expect(model).toBe("website.menu"); + expect(method).toBe("get_tree"); + expect(args[0]).toBe(1); + return { + fields: { + id: 4, + name: "Top Menu", + url: "#", + new_window: false, + is_mega_menu: false, + sequence: 0, + parent_id: false, + }, + children: [ + { + fields: { + id: 5, + name: "Top Menu Item", + url: "exists", + new_window: false, + is_mega_menu: false, + sequence: 10, + parent_id: 4, + }, + children: [], + is_homepage: true, + }, + ], + is_homepage: false, + }; + }); + const { el } = await setupEditor( + ``, + { + config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] }, + } + ); + mockService("website", { + get currentWebsite() { + return { + id: 1, + metadata: { + lang: "en_EN", + }, + }; + }, + }); + expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0); + // open navbar link popover + setSelection({ anchorNode: el.querySelector(".nav-link > span"), anchorOffset: 0 }); + await waitFor(".o-we-linkpopover"); + expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1); + // click on edit menu button + await click(".js_edit_menu"); + // check that EditMenuDialog is open with correct values + await waitFor(".o_website_dialog"); + expect(".oe_menu_editor").toHaveCount(1); + expect(".js_menu_label").toHaveText("Top Menu Item"); + }); +}); From 0a78dae4d1ab9b45164211d989a57c95b33b6de0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Mon, 12 May 2025 15:01:57 +0200 Subject: [PATCH 143/240] preload editor assets --- .../static/src/website_preview/website_builder_action.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.js b/addons/html_builder/static/src/website_preview/website_builder_action.js index 680a95591e391..cbf63b6eaf11c 100644 --- a/addons/html_builder/static/src/website_preview/website_builder_action.js +++ b/addons/html_builder/static/src/website_preview/website_builder_action.js @@ -116,6 +116,10 @@ export class WebsiteBuilder extends Component { if (edition) { this.onEditPage(); } + if (!this.ui.isSmall) { + // preload builder so clicking on "edit" is faster + loadBundle("html_builder.assets"); + } }); this.publicRootReady = new Deferred(); this.setIframeLoaded(); From 6b78d00d03d223508c0c2b2f771f75b970217fd7 Mon Sep 17 00:00:00 2001 From: Serhii Rubanskyi - seru Date: Fri, 9 May 2025 17:08:36 +0200 Subject: [PATCH 144/240] add post undo and redo handlers to DisableSnippetsPlugin --- addons/html_builder/static/src/core/disable_snippets_plugin.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/addons/html_builder/static/src/core/disable_snippets_plugin.js b/addons/html_builder/static/src/core/disable_snippets_plugin.js index 6ed2568856e17..0d5fbaebbca3d 100644 --- a/addons/html_builder/static/src/core/disable_snippets_plugin.js +++ b/addons/html_builder/static/src/core/disable_snippets_plugin.js @@ -8,6 +8,8 @@ export class DisableSnippetsPlugin extends Plugin { resources = { after_remove_handlers: this.disableUndroppableSnippets.bind(this), on_mobile_preview_clicked: this.disableUndroppableSnippets.bind(this), + post_undo_handlers: this.disableUndroppableSnippets.bind(this), + post_redo_handlers: this.disableUndroppableSnippets.bind(this), }; setup() { From 8fa5a6c8d1d6c3a379a0baa88e3bf169fbaff452 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Mon, 12 May 2025 10:43:50 +0200 Subject: [PATCH 145/240] form custom field value list for multiple checkbox, radio and selection --- .../src/core/building_blocks/builder_list.js | 5 ++-- .../src/core/building_blocks/builder_list.xml | 28 +++++++++++++------ .../plugins/form/form_field_option.js | 3 ++ .../plugins/form/form_option.xml | 20 +++++-------- .../plugins/form/form_option_plugin.js | 14 ++++++++++ 5 files changed, 47 insertions(+), 23 deletions(-) diff --git a/addons/html_builder/static/src/core/building_blocks/builder_list.js b/addons/html_builder/static/src/core/building_blocks/builder_list.js index bb713b7e535df..fe7be2df67e6f 100644 --- a/addons/html_builder/static/src/core/building_blocks/builder_list.js +++ b/addons/html_builder/static/src/core/building_blocks/builder_list.js @@ -16,7 +16,7 @@ export class BuilderList extends Component { addItemTitle: { type: String, optional: true }, itemShape: { type: Object, - values: [{ value: "number" }, { value: "text" }], + values: [{ value: "number" }, { value: "text" }, { value: "boolean" }], validate: (value) => // is not empty object and doesn't include reserved fields Object.keys(value).length > 0 && !Object.keys(value).includes("_id"), @@ -142,7 +142,8 @@ export class BuilderList extends Component { handleValueChange(targetInputEl, commitToHistory) { const id = targetInputEl.dataset.id; const propertyName = targetInputEl.name; - const value = targetInputEl.value; + const value = + targetInputEl.type === "checkbox" ? targetInputEl.checked : targetInputEl.value; const items = this.formatRawValue(this.state.value); const item = items.find((item) => item._id === id); diff --git a/addons/html_builder/static/src/core/building_blocks/builder_list.xml b/addons/html_builder/static/src/core/building_blocks/builder_list.xml index 061a7072fb2d2..a13a5d21ff24d 100644 --- a/addons/html_builder/static/src/core/building_blocks/builder_list.xml +++ b/addons/html_builder/static/src/core/building_blocks/builder_list.xml @@ -13,14 +13,26 @@ - + +
+ +
+ + + + diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_field_option.js b/addons/html_builder/static/src/website_builder/plugins/form/form_field_option.js index c7296b84668c4..32fc634c13fee 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_field_option.js +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_field_option.js @@ -20,6 +20,7 @@ export class FormFieldOption extends BaseOptionComponent { conditionInputs: [], conditionValueList: [], dependencyEl: null, + valueList: null, }); this.domState = useDomState((el) => { const modelName = el.closest("form")?.dataset.model_name; @@ -36,6 +37,7 @@ export class FormFieldOption extends BaseOptionComponent { const fieldOptionData = await this.props.loadFieldOptionData(el); this.state.availableFields.push(...fieldOptionData.availableFields); this.state.conditionInputs.push(...fieldOptionData.conditionInputs); + this.state.valueList = fieldOptionData.valueList; this.state.conditionValueList.push(...fieldOptionData.conditionValueList); this.state.dependencyEl = getDependencyEl(el); }); @@ -46,6 +48,7 @@ export class FormFieldOption extends BaseOptionComponent { this.state.availableFields.push(...fieldOptionData.availableFields); this.state.conditionInputs.length = 0; this.state.conditionInputs.push(...fieldOptionData.conditionInputs); + this.state.valueList = fieldOptionData.valueList; this.state.conditionValueList.length = 0; this.state.conditionValueList.push(...fieldOptionData.conditionValueList); this.state.dependencyEl = getDependencyEl(el); diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option.xml b/addons/html_builder/static/src/website_builder/plugins/form/form_option.xml index f3ad9ded96ec6..0872885181247 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_option.xml +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_option.xml @@ -213,20 +213,14 @@ unit="'MB'" /> - -
TODO
+ + - Always Visible diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js index 557554a3db416..05fff357181dc 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js @@ -533,6 +533,19 @@ export class FormOptionPlugin extends Plugin { return currentValue === value; }, }, + setFormCustomFieldValueList: { + apply: ({ editingElement: fieldEl, value }) => { + const fields = []; + const field = getActiveField(fieldEl, { fields }); + field.records = JSON.parse(value); + this.replaceField(fieldEl, field, fields); + }, + getValue: ({ editingElement: fieldEl }) => { + const fields = []; + const field = getActiveField(fieldEl, { fields }); + return JSON.stringify(field.records); + }, + }, }; } setup() { @@ -985,6 +998,7 @@ export class FormOptionPlugin extends Plugin { valueList = reactive({ title: _t("%s List", optionText), addItemTitle: _t("Add new %s", optionText), + defaultItemName: _t("Item"), hasDefault: ["one2many", "many2many"].includes(type) ? "multiple" : "unique", defaults: JSON.stringify(defaults), availableRecords: availableRecords, From d4d0e0e2a9b4f0035d4c557eef173a67a8f859ec Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Mon, 12 May 2025 15:13:58 +0200 Subject: [PATCH 146/240] mutually exclusive selection for radio and selection --- .../static/src/core/building_blocks/builder_list.js | 12 +++++++++++- .../static/src/core/building_blocks/builder_list.xml | 2 +- .../plugins/form/form_field_option.js | 1 + .../plugins/form/form_option.inside.scss | 3 +++ .../src/website_builder/plugins/form/form_option.xml | 2 +- .../plugins/form/form_option_plugin.js | 9 +++++---- 6 files changed, 22 insertions(+), 7 deletions(-) diff --git a/addons/html_builder/static/src/core/building_blocks/builder_list.js b/addons/html_builder/static/src/core/building_blocks/builder_list.js index fe7be2df67e6f..91c1cf65aba1c 100644 --- a/addons/html_builder/static/src/core/building_blocks/builder_list.js +++ b/addons/html_builder/static/src/core/building_blocks/builder_list.js @@ -16,7 +16,12 @@ export class BuilderList extends Component { addItemTitle: { type: String, optional: true }, itemShape: { type: Object, - values: [{ value: "number" }, { value: "text" }, { value: "boolean" }], + values: [ + { value: "number" }, + { value: "text" }, + { value: "boolean" }, + { value: "exclusive_boolean" }, + ], validate: (value) => // is not empty object and doesn't include reserved fields Object.keys(value).length > 0 && !Object.keys(value).includes("_id"), @@ -146,6 +151,11 @@ export class BuilderList extends Component { targetInputEl.type === "checkbox" ? targetInputEl.checked : targetInputEl.value; const items = this.formatRawValue(this.state.value); + if (value === true && this.props.itemShape[propertyName] === "exclusive_boolean") { + for (const item of items) { + item[propertyName] = false; + } + } const item = items.find((item) => item._id === id); item[propertyName] = value; diff --git a/addons/html_builder/static/src/core/building_blocks/builder_list.xml b/addons/html_builder/static/src/core/building_blocks/builder_list.xml index a13a5d21ff24d..4ea20d4b68383 100644 --- a/addons/html_builder/static/src/core/building_blocks/builder_list.xml +++ b/addons/html_builder/static/src/core/building_blocks/builder_list.xml @@ -13,7 +13,7 @@ - +
{ const el = this.env.getEditingElement(); const fieldOptionData = await this.props.loadFieldOptionData(el); + console.log(38, fieldOptionData); this.state.availableFields.push(...fieldOptionData.availableFields); this.state.conditionInputs.push(...fieldOptionData.conditionInputs); this.state.valueList = fieldOptionData.valueList; diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option.inside.scss b/addons/html_builder/static/src/website_builder/plugins/form/form_option.inside.scss index 09c1ced487846..ef12c8fb9ba90 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_option.inside.scss +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_option.inside.scss @@ -18,4 +18,7 @@ display: block !important; background-color: $o-we-fg-light; } + .s_website_form_label, .s_website_form_check_label { + pointer-events: none; + } } diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option.xml b/addons/html_builder/static/src/website_builder/plugins/form/form_option.xml index 0872885181247..683c4f8555d9b 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_option.xml +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_option.xml @@ -217,7 +217,7 @@ diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js index 05fff357181dc..daa9f906d956c 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js @@ -982,11 +982,11 @@ export class FormOptionPlugin extends Plugin { const field = Object.assign({}, fields[getFieldName(fieldEl)]); const type = getFieldType(fieldEl); - const optionText = selectEl - ? "Option" + const [optionText, checkType] = selectEl + ? [_t("Option"), "exclusive_boolean"] : type === "selection" - ? _t("Radio") - : _t("Checkbox"); + ? [_t("Radio"), "exclusive_boolean"] + : [_t("Checkbox"), "boolean"]; const defaults = [...fieldEl.querySelectorAll("[checked], [selected]")].map((el) => /^-?[0-9]{1,15}$/.test(el.value) ? parseInt(el.value) : el.value ); @@ -998,6 +998,7 @@ export class FormOptionPlugin extends Plugin { valueList = reactive({ title: _t("%s List", optionText), addItemTitle: _t("Add new %s", optionText), + checkType, defaultItemName: _t("Item"), hasDefault: ["one2many", "many2many"].includes(type) ? "multiple" : "unique", defaults: JSON.stringify(defaults), From 2d791165d944716cc1ee87a6d78764316876bbbf Mon Sep 17 00:00:00 2001 From: chdh-odoo Date: Thu, 1 May 2025 12:02:53 +0530 Subject: [PATCH 147/240] [FIX] website: adapt tour website_click_tour --- addons/website/static/tests/tours/website_click_tests.js | 2 +- addons/website/tests/test_ui.py | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/addons/website/static/tests/tours/website_click_tests.js b/addons/website/static/tests/tours/website_click_tests.js index 32d2c693e661e..b6e9683a5b898 100644 --- a/addons/website/static/tests/tours/website_click_tests.js +++ b/addons/website/static/tests/tours/website_click_tests.js @@ -25,7 +25,7 @@ registerWebsitePreviewTour('website_click_tour', { }, { content: "wait for the page to be loaded", - trigger: '.o_website_preview[data-view-xmlid="website.contactus"]', + trigger: ".o_website_preview :iframe [data-view-xmlid='website.contactus']", }, ...clickOnEditAndWaitEditMode(), { diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index c1a2f41581e7a..d0fd4b7604d19 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -581,7 +581,6 @@ def test_26_website_media_dialog_icons(self): }) self.start_tour("/", 'website_media_dialog_icons', login='admin') - @unittest.skip def test_27_website_clicks(self): self.start_tour('/odoo', 'website_click_tour', login='admin') From d6b05887afb232bc22a33fa8840a981cb2ba1971 Mon Sep 17 00:00:00 2001 From: chdh-odoo Date: Mon, 5 May 2025 12:01:29 +0530 Subject: [PATCH 148/240] [FIX] website: adapt tour test_powerbox_snippet --- addons/website/static/tests/tours/powerbox_snippet.js | 10 +++++----- addons/website/tests/test_ui.py | 1 - 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/addons/website/static/tests/tours/powerbox_snippet.js b/addons/website/static/tests/tours/powerbox_snippet.js index 8dcc7107447c0..543bf9c515d25 100644 --- a/addons/website/static/tests/tours/powerbox_snippet.js +++ b/addons/website/static/tests/tours/powerbox_snippet.js @@ -34,7 +34,7 @@ registerWebsitePreviewTour("website_powerbox_snippet",{ }, { content: "Click on the alert snippet", - trigger: ".oe-powerbox-wrapper .oe-powerbox-commandWrapper:contains('Alert')", + trigger: ".o-we-powerbox .o-we-command:contains('Alert')", run: "click", }, { @@ -79,7 +79,7 @@ registerWebsitePreviewTour( }, { content: "Initially alert snippet should be present in the powerbox", - trigger: ".oe-powerbox-wrapper .oe-powerbox-commandName:contains('Alert')", + trigger: ".o-we-powerbox .o-we-command:contains('Alert')", }, { content: "Change the content to '/table' so that alert snippet should not be present in the powerbox", @@ -98,7 +98,7 @@ registerWebsitePreviewTour( }, { content: "Alert snippet should not be present in the powerbox", - trigger: ".oe-powerbox-wrapper .oe-powerbox-commandName:not(:contains('Alert'))", + trigger: ".o-we-powerbox .o-we-command:not(:contains('Alert'))", }, { content: "Change the content to '/banner'", @@ -117,11 +117,11 @@ registerWebsitePreviewTour( }, { content: "Alert snippet should be present in the powerbox", - trigger: ".oe-powerbox-wrapper .oe-powerbox-commandName:contains('Alert')", + trigger: ".o-we-powerbox .o-we-command:contains('Alert')", }, { content: "Click on the alert snippet", - trigger: ".oe-powerbox-wrapper .oe-powerbox-commandName:contains('Alert')", + trigger: ".o-we-powerbox .o-we-command:contains('Alert')", run: "click", }, { diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index d0fd4b7604d19..81d3f16d52db7 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -719,7 +719,6 @@ def test_drop_404_ir_attachment_url(self): def test_mobile_order_with_drag_and_drop(self): self.start_tour(self.env['website'].get_client_action_url('/'), 'website_mobile_order_with_drag_and_drop', login='admin') - @unittest.skip def test_powerbox_snippet(self): self.start_tour('/', 'website_powerbox_snippet', login='admin') self.start_tour('/', 'website_powerbox_keyword', login='admin') From e4f364055dca2748d7cbb8396101cd6e2252c216 Mon Sep 17 00:00:00 2001 From: chdh-odoo Date: Mon, 5 May 2025 12:31:52 +0530 Subject: [PATCH 149/240] [FIX] website: adapt tour restricted_editor --- addons/website/tests/test_ui.py | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index 81d3f16d52db7..f6933759be2e7 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -297,7 +297,6 @@ class TestUi(HttpCaseWithWebsiteUser): def test_01_admin_tour_homepage(self): self.start_tour("/odoo", 'homepage', login='admin') - @unittest.skip def test_02_restricted_editor(self): self.start_tour(self.env['website'].get_client_action_url('/'), 'restricted_editor', login="website_user") From eaefb278c86b8cba148731ef5540d0b13c7f67df Mon Sep 17 00:00:00 2001 From: Serhii Rubanskyi - seru Date: Mon, 12 May 2025 16:08:02 +0200 Subject: [PATCH 150/240] check if the component has been previously destroyed in the effect --- .../src/website_preview/website_builder_action.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.js b/addons/html_builder/static/src/website_preview/website_builder_action.js index cbf63b6eaf11c..c2b5c1b1f1574 100644 --- a/addons/html_builder/static/src/website_preview/website_builder_action.js +++ b/addons/html_builder/static/src/website_preview/website_builder_action.js @@ -4,6 +4,8 @@ import { onMounted, onWillDestroy, onWillStart, + status, + useComponent, useEffect, useRef, useState, @@ -49,6 +51,7 @@ export class WebsiteBuilder extends Component { }); this.state = useState({ isEditing: false, key: 1 }); this.websiteContext = useState(this.websiteService.context); + this.component = useComponent(); this.onKeydownRefresh = this._onKeydownRefresh.bind(this); @@ -56,10 +59,13 @@ export class WebsiteBuilder extends Component { // You can't wait for rendering because the Builder depends on the page style synchronously. effect( (websiteContext) => { + if (status(this.component) === "destroyed") { + return; + } if (websiteContext.isMobile) { - this.websitePreviewRef.el?.classList.add("o_is_mobile"); + this.websitePreviewRef.el.classList.add("o_is_mobile"); } else { - this.websitePreviewRef.el?.classList.remove("o_is_mobile"); + this.websitePreviewRef.el.classList.remove("o_is_mobile"); } }, [this.websiteContext] From d94ce3843febadee27b1a791fe034bd02609e683 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Tue, 13 May 2025 09:25:00 +0200 Subject: [PATCH 151/240] fix 2 failing tests --- .../static/tests/public/interaction.test.js | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/addons/web/static/tests/public/interaction.test.js b/addons/web/static/tests/public/interaction.test.js index 1a6be0f4eb8ae..9dbf018336a33 100644 --- a/addons/web/static/tests/public/interaction.test.js +++ b/addons/web/static/tests/public/interaction.test.js @@ -63,6 +63,9 @@ describe("adding listeners", () => { let clicked = 0; class Test extends Interaction { static selector = ".test"; + dynamicContent = { + span: { "t-on-click": () => clicked++ }, + }; } await startInteraction(Test, TemplateTest); expect(clicked).toBe(0); @@ -74,6 +77,9 @@ describe("adding listeners", () => { let clicked = 0; class Test extends Interaction { static selector = ".test"; + dynamicContent = { + span: { "t-on-click": () => clicked++ }, + }; } await startInteraction(Test, TemplateTestDoubleSpan); expect(clicked).toBe(0); @@ -1577,7 +1583,7 @@ describe("t-att-style", () => { span: { "t-att-style": () => ({ "background-color": this.bgColor, - "color": this.color, + color: this.color, }), }, }; @@ -1592,10 +1598,16 @@ describe("t-att-style", () => { }, 1000); } } - await startInteraction(Test, `
Hi
`); - expect("span").toHaveStyle({ "background-color": "rgb(0, 255, 0)", "color": "rgb(255, 0, 0)" }); + await startInteraction( + Test, + `
Hi
` + ); + expect("span").toHaveStyle({ + "background-color": "rgb(0, 255, 0)", + color: "rgb(255, 0, 0)", + }); await advanceTime(1000); - expect("span").toHaveStyle({ "background-color": "rgb(0, 0, 255)", "color": "rgb(0, 0, 0)" }); + expect("span").toHaveStyle({ "background-color": "rgb(0, 0, 255)", color: "rgb(0, 0, 0)" }); }); }); @@ -1798,8 +1810,10 @@ describe("t-att and t-out", () => { return markup(this.tOut); }, }, - "span": { - "t-on-click.noUpdate": () => { expect.step("clicked") }, + span: { + "t-on-click.noUpdate": () => { + expect.step("clicked"); + }, }, }; setup() { @@ -1882,7 +1896,6 @@ describe("t-att and t-out", () => { expect("span").not.toHaveAttribute("animal"); expect("span").toHaveAttribute("egg", "mysterious"); }); - }); describe("components", () => { From c17b140fb03752b8733b1c615db8f59f12ac5708 Mon Sep 17 00:00:00 2001 From: FrancoisGe Date: Mon, 12 May 2025 16:44:51 +0200 Subject: [PATCH 152/240] [FIX] select_menu test. Always run onInput when you open popover --- .../static/src/core/select_menu/select_menu.js | 18 +++--------------- .../web/static/tests/core/select_menu.test.js | 16 ++++++---------- 2 files changed, 9 insertions(+), 25 deletions(-) diff --git a/addons/web/static/src/core/select_menu/select_menu.js b/addons/web/static/src/core/select_menu/select_menu.js index bcb30904deb65..166b484aa39ed 100644 --- a/addons/web/static/src/core/select_menu/select_menu.js +++ b/addons/web/static/src/core/select_menu/select_menu.js @@ -170,15 +170,7 @@ export class SelectMenu extends Component { } async onBeforeOpen() { - if (this.state.searchValue.length) { - this.state.searchValue = ""; - } - if (this.props.onInput) { - // This props can be used by the parent to fetch items dynamically depending - // the search value. It must be called with the empty search value. - await this.executeOnInput(""); - } - this.filterOptions(); + await this.onInput(""); } onStateChanged(open) { @@ -207,11 +199,7 @@ export class SelectMenu extends Component { } } - async executeOnInput(searchString) { - await this.props.onInput(searchString); - } - - onInput(searchString) { + async onInput(searchString) { this.filterOptions(searchString); this.state.searchValue = searchString; @@ -221,7 +209,7 @@ export class SelectMenu extends Component { inputEl.parentNode.scrollTo(0, 0); } if (this.props.onInput) { - this.executeOnInput(searchString); + await this.props.onInput(searchString); } } diff --git a/addons/web/static/tests/core/select_menu.test.js b/addons/web/static/tests/core/select_menu.test.js index 98f600fd6eb34..2b703db4cbcde 100644 --- a/addons/web/static/tests/core/select_menu.test.js +++ b/addons/web/static/tests/core/select_menu.test.js @@ -949,8 +949,6 @@ test("Choices are updated and filtered when props change", async () => { }); test("SelectMenu group items only after being opened", async () => { - let count = 0; - patchWithCleanup(SelectMenu.prototype, { filterOptions(args) { expect.step("filterOptions"); @@ -984,11 +982,9 @@ test("SelectMenu group items only after being opened", async () => { }); } - onInput() { - count++; + onInput(searchString) { // options have been filtered when typing on the search input", - expect.verifySteps(["filterOptions"]); - if (count === 1) { + if (searchString === "option d") { this.state.choices = [{ label: "Option C", value: "optionC" }]; this.state.groups = [ { @@ -1015,7 +1011,7 @@ test("SelectMenu group items only after being opened", async () => { await open(); expect(".o_select_menu_menu").toHaveText("Option A\nGroup A\nOption B\nOption C"); - expect.verifySteps(["filterOptions"]); + expect.verifySteps(["filterOptions", "filterOptions"]); await click("input"); await edit("option d"); @@ -1023,14 +1019,14 @@ test("SelectMenu group items only after being opened", async () => { await animationFrame(); expect(".o_select_menu_menu").toHaveText("Group B\nOption D"); - expect.verifySteps(["filterOptions"]); + expect.verifySteps(["filterOptions", "filterOptions"]); await edit(""); await runAllTimers(); await animationFrame(); expect(".o_select_menu_menu").toHaveText("Option A\nGroup A\nOption B\nOption C"); - expect.verifySteps(["filterOptions"]); + expect.verifySteps(["filterOptions", "filterOptions"]); }); test("search value is cleared when reopening the menu", async () => { @@ -1058,7 +1054,7 @@ test("search value is cleared when reopening the menu", async () => { } await mountSingleApp(MyParent); await open(); - expect.verifySteps([]); + expect.verifySteps(["search="]); await click("input"); await edit("a"); await runAllTimers(); From 3d53ab49cbfa55ab2d5736563f7ec2bd03e37ad4 Mon Sep 17 00:00:00 2001 From: aans-odoo Date: Wed, 16 Apr 2025 17:47:56 +0530 Subject: [PATCH 153/240] [IMP] website: adapt test_26_website_media_dialog_icons test --- addons/website/tests/test_ui.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index f6933759be2e7..4e6af2eb2e997 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -567,7 +567,6 @@ def test_24_snippet_cache_across_websites(self): 'websiteIdMapping': json.dumps({'Test Website': website.id}) }) - @unittest.skip def test_26_website_media_dialog_icons(self): self.env.ref('website.default_website').write({ 'social_twitter': 'https://twitter.com/Odoo', @@ -577,6 +576,7 @@ def test_26_website_media_dialog_icons(self): 'social_github': 'https://github.com/odoo', 'social_instagram': 'https://www.instagram.com/explore/tags/odoo/', 'social_tiktok': 'https://www.tiktok.com/@odoo', + 'social_discord': 'https://discord.com/servers/discord-town-hall-169256939211980800', }) self.start_tour("/", 'website_media_dialog_icons', login='admin') From 8bf278b8cf26b03c79e1029e2121e3e6dee5cbb3 Mon Sep 17 00:00:00 2001 From: aans-odoo Date: Fri, 11 Apr 2025 18:35:53 +0530 Subject: [PATCH 154/240] [IMP] website: adapt snippet_image tour --- addons/website/static/tests/tours/snippet_image.js | 2 +- addons/website/tests/test_snippets.py | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/addons/website/static/tests/tours/snippet_image.js b/addons/website/static/tests/tours/snippet_image.js index bcc2a096cc465..9363e8f4f2dbc 100644 --- a/addons/website/static/tests/tours/snippet_image.js +++ b/addons/website/static/tests/tours/snippet_image.js @@ -34,7 +34,7 @@ registerWebsitePreviewTour("snippet_image", { }, { content: "Click on the 'undo' button", - trigger: '#oe_snippets button.fa-undo', + trigger: '.o-snippets-top-actions button.fa-undo', run: "click", }, { diff --git a/addons/website/tests/test_snippets.py b/addons/website/tests/test_snippets.py index ea6578904ee56..cb4c10cc48c52 100644 --- a/addons/website/tests/test_snippets.py +++ b/addons/website/tests/test_snippets.py @@ -145,7 +145,6 @@ def test_dropdowns_and_header_hide_on_scroll(self): }) self.start_tour(self.env['website'].get_client_action_url('/'), 'dropdowns_and_header_hide_on_scroll', login='admin') - @unittest.skip def test_snippet_image(self): create_image_attachment(self.env, '/web/image/website.s_banner_default_image', 's_default_image.jpg') self.start_tour(self.env['website'].get_client_action_url('/'), 'snippet_image', login='admin') From 897756105f3b3bf59ff8dfc9172d0c34f19fcbaa Mon Sep 17 00:00:00 2001 From: aans-odoo Date: Fri, 11 Apr 2025 18:44:08 +0530 Subject: [PATCH 155/240] [IMP] website: adapt website_start_cloned_snippet tour --- .../website/static/tests/tours/start_cloned_snippet.js | 9 ++------- addons/website/tests/test_ui.py | 1 - 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/addons/website/static/tests/tours/start_cloned_snippet.js b/addons/website/static/tests/tours/start_cloned_snippet.js index eb1736fa287e2..20aced067854d 100644 --- a/addons/website/static/tests/tours/start_cloned_snippet.js +++ b/addons/website/static/tests/tours/start_cloned_snippet.js @@ -1,6 +1,7 @@ import { clickOnSnippet, registerWebsitePreviewTour, + insertSnippet, } from '@website/js/tours/tour_utils'; registerWebsitePreviewTour('website_start_cloned_snippet', { @@ -12,13 +13,7 @@ registerWebsitePreviewTour('website_start_cloned_snippet', { id: 's_countdown', }; return [ - { - trigger: ".o_website_preview.editor_enable.editor_has_snippets", - }, - { - trigger: `#oe_snippets .oe_snippet[name="${countdownSnippet.name}"].o_we_draggable .oe_snippet_thumbnail:not(.o_we_ongoing_insertion)`, - run: "drag_and_drop :iframe #wrapwrap #wrap", - }, + ...insertSnippet(countdownSnippet), ...clickOnSnippet(countdownSnippet), { content: 'Click on clone snippet', diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index 4e6af2eb2e997..56d904921cb49 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -533,7 +533,6 @@ def test_19_website_page_options(self): def test_20_snippet_editor_panel_options(self): self.start_tour('/@/', 'snippet_editor_panel_options', login='admin') - @unittest.skip def test_21_website_start_cloned_snippet(self): self.start_tour('/odoo', 'website_start_cloned_snippet', login='admin') From 412566a0bdd8b3d00bb01d134a2c698f0d95fe05 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Thu, 8 May 2025 10:38:25 +0200 Subject: [PATCH 156/240] variable-stored color picker options --- .../building_blocks/builder_colorpicker.js | 33 +++-- .../plugins/customize_website_plugin.js | 43 ++++-- .../options/footer_copyright_option.xml | 26 ++-- .../plugins/options/footer_option.xml | 26 ++-- .../plugins/options/header_option.xml | 130 ++++++------------ .../static/src/main/font/color_plugin.js | 23 +++- 6 files changed, 138 insertions(+), 143 deletions(-) diff --git a/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js b/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js index b871c88e9f53e..f37090a3568b4 100644 --- a/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js +++ b/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js @@ -10,7 +10,6 @@ import { useHasPreview, } from "../utils"; import { isColorGradient } from "@web/core/utils/colors"; -import { COLOR_COMBINATION_CLASSES_REGEX } from "@html_editor/utils/color"; // TODO replace by useInputBuilderComponent after extract unit by AGAU export function useColorPickerBuilderComponent() { @@ -46,8 +45,11 @@ export function useColorPickerBuilderComponent() { const { actionId, actionParam } = actionWithGetValue; const actionValue = getAction(actionId).getValue({ editingElement, params: actionParam }); return { - selectedColor: actionValue || "#FFFFFF00", - selectedColorCombination: getColorCombination(editingElement), + selectedColor: actionValue || comp.props.defaultColor, + selectedColorCombination: comp.env.editor.shared.color.getColorCombination( + editingElement, + actionParam + ), }; } function getColor(colorValue) { @@ -90,10 +92,12 @@ export class BuilderColorPicker extends Component { title: { type: String, optional: true }, getUsedCustomColors: { type: Function, optional: true }, selectedTab: { type: String, optional: true }, + defaultColor: { type: String, optional: true }, }; static defaultProps = { getUsedCustomColors: () => [], enabledTabs: ["theme", "gradient", "custom"], + defaultColor: "#FFFFFF00", }; static components = { ColorSelector: ColorSelector, @@ -125,13 +129,22 @@ export class BuilderColorPicker extends Component { } getSelectedColorStyle() { - if (isColorGradient(this.state.selectedColor)) { - return `background-image: ${this.state.selectedColor}`; + if (this.state.selectedColor) { + if (isColorGradient(this.state.selectedColor)) { + return `background-image: ${this.state.selectedColor}`; + } + return `background-color: ${this.state.selectedColor}`; + } + if (this.state.selectedColorCombination) { + const colorCombination = this.state.selectedColorCombination.replace("_", "-"); + const el = this.env.getEditingElement(); + const style = el.ownerDocument.defaultView.getComputedStyle(el); + if (style.backgroundImage !== "none") { + return `background-image: ${style.backgroundImage}`; + } else { + return `background-color: var(--${colorCombination}-bg)`; + } } - return `background-color: ${this.state.selectedColor}`; + return ""; } } - -function getColorCombination(el) { - return el.className.match?.(COLOR_COMBINATION_CLASSES_REGEX)?.[0]; -} diff --git a/addons/html_builder/static/src/website_builder/plugins/customize_website_plugin.js b/addons/html_builder/static/src/website_builder/plugins/customize_website_plugin.js index 07bbb5a508960..74978a66aa25d 100644 --- a/addons/html_builder/static/src/website_builder/plugins/customize_website_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/customize_website_plugin.js @@ -1,8 +1,4 @@ -import { - getCSSVariableValue, - isColorCombinationName, - isCSSVariable, -} from "@html_builder/utils/utils_css"; +import { getCSSVariableValue, isCSSVariable } from "@html_builder/utils/utils_css"; import { Plugin } from "@html_editor/plugin"; import { parseHTML } from "@html_editor/utils/html"; import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog"; @@ -12,6 +8,7 @@ import { registry } from "@web/core/registry"; import { isColorGradient, isCSSColor } from "@web/core/utils/colors"; import { Deferred } from "@web/core/utils/concurrency"; import { debounce } from "@web/core/utils/timing"; +import { withSequence } from "@html_editor/utils/resource"; export const NO_IMAGE_SELECTION = Symbol.for("NoImageSelection"); @@ -32,6 +29,13 @@ export class CustomizeWebsitePlugin extends Plugin { resources = { builder_actions: this.getActions(), + color_combination_getters: withSequence(5, (el, actionParam) => { + const combination = actionParam.combinationColor; + if (combination) { + const style = this.window.getComputedStyle(this.document.documentElement); + return `o_cc${getCSSVariableValue(combination, style)}`; + } + }), }; cache = {}; @@ -76,7 +80,9 @@ export class CustomizeWebsitePlugin extends Plugin { }, }), customizeWebsiteColor: this.withCustomHistory({ - getValue: ({ params: { mainParam: color, colorType, gradientColor } }) => { + getValue: ({ + params: { mainParam: color, colorType, gradientColor, combinationColor }, + }) => { const style = this.window.getComputedStyle(this.document.documentElement); if (gradientColor) { const gradientValue = this.getWebsiteVariableValue(gradientColor); @@ -87,7 +93,13 @@ export class CustomizeWebsitePlugin extends Plugin { return getCSSVariableValue(color, style); }, apply: async ({ - params: { mainParam: color, colorType, gradientColor }, + params: { + mainParam: color, + colorType, + gradientColor, + combinationColor, + nullValue, + }, value, }) => { if (gradientColor) { @@ -102,13 +114,16 @@ export class CustomizeWebsitePlugin extends Plugin { { [color]: colorValue, }, - { colorType } + { colorType, combinationColor, nullValue } ); await this.customizeWebsiteVariables({ - [gradientColor]: gradientValue, + [gradientColor]: gradientValue || nullValue, }); // reloads bundles } else { - await this.customizeWebsiteColors({ [color]: value }, { colorType }); + await this.customizeWebsiteColors( + { [color]: value }, + { colorType, combinationColor, nullValue } + ); } }, }), @@ -360,7 +375,7 @@ export class CustomizeWebsitePlugin extends Plugin { nullValue ); }, 0); - async customizeWebsiteColors(colors = {}, { colorType, nullValue } = {}) { + async customizeWebsiteColors(colors = {}, { colorType, combinationColor, nullValue } = {}) { const baseURL = "/website/static/src/scss/options/colors/"; colorType = colorType ? colorType + "_" : ""; const url = `${baseURL}user_${colorType}color_palette.scss`; @@ -369,8 +384,10 @@ export class CustomizeWebsitePlugin extends Plugin { for (const [colorName, color] of Object.entries(colors)) { finalColors[colorName] = color; if (color) { - if (isColorCombinationName(color)) { - finalColors[colorName] = parseInt(color); + const isColorCombination = /^o_cc[12345]$/.test(color); + if (isColorCombination) { + finalColors[combinationColor] = parseInt(color.substring(4)); + delete finalColors[colorName]; } else if (isCSSVariable(color)) { const customProperty = color.match(/var\(--(.+?)\)/)[1]; finalColors[colorName] = this.getWebsiteVariableValue(customProperty); diff --git a/addons/html_builder/static/src/website_builder/plugins/options/footer_copyright_option.xml b/addons/html_builder/static/src/website_builder/plugins/options/footer_copyright_option.xml index 8c0451d5150ee..653cc57f8d720 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/footer_copyright_option.xml +++ b/addons/html_builder/static/src/website_builder/plugins/options/footer_copyright_option.xml @@ -3,25 +3,17 @@ - + defaultColor="''" + action="'customizeWebsiteColor'" + actionParam="{ + mainParam: 'copyright-custom', + gradientColor: 'copyright-gradient', + combinationColor: 'copyright', + nullValue: 'NULL', + }"/> diff --git a/addons/html_builder/static/src/website_builder/plugins/options/footer_option.xml b/addons/html_builder/static/src/website_builder/plugins/options/footer_option.xml index 508078e3cfab6..2e53ee05a7cff 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/footer_option.xml +++ b/addons/html_builder/static/src/website_builder/plugins/options/footer_option.xml @@ -66,25 +66,17 @@ - + defaultColor="''" + action="'customizeWebsiteColor'" + actionParam="{ + mainParam: 'footer-custom', + gradientColor: 'footer-gradient', + combinationColor: 'footer', + nullValue: 'NULL', + }"/> diff --git a/addons/html_builder/static/src/website_builder/plugins/options/header_option.xml b/addons/html_builder/static/src/website_builder/plugins/options/header_option.xml index 9255f755ad64e..f7ff1f6d533f1 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/header_option.xml +++ b/addons/html_builder/static/src/website_builder/plugins/options/header_option.xml @@ -204,101 +204,61 @@ - - + defaultColor="''" + action="'customizeWebsiteColor'" + actionParam="{ + mainParam: 'menu-custom', + gradientColor: 'menu-gradient', + combinationColor: 'menu', + nullValue: 'NULL', + }"/> - + defaultColor="''" + action="'customizeWebsiteColor'" + actionParam="{ + mainParam: 'header-sales_one-custom', + gradientColor: 'menu-secondary-gradient', + combinationColor: 'header-sales_one', + nullValue: 'NULL', + }"/> - + defaultColor="''" + action="'customizeWebsiteColor'" + actionParam="{ + mainParam: 'header-sales_two-custom', + gradientColor: 'menu-secondary-gradient', + combinationColor: 'header-sales_two', + nullValue: 'NULL', + }"/> - + defaultColor="''" + action="'customizeWebsiteColor'" + actionParam="{ + mainParam: 'header-sales_three-custom', + gradientColor: 'menu-secondary-gradient', + combinationColor: 'header-sales_three', + nullValue: 'NULL', + }"/> + defaultColor="''" + action="'customizeWebsiteColor'" + actionParam="{ + mainParam: 'header-sales_four-custom', + gradientColor: 'menu-secondary-gradient', + combinationColor: 'header-sales_four', + nullValue: 'NULL', + }"/> diff --git a/addons/html_editor/static/src/main/font/color_plugin.js b/addons/html_editor/static/src/main/font/color_plugin.js index 4faf350855f99..0bbf47b67ca7d 100644 --- a/addons/html_editor/static/src/main/font/color_plugin.js +++ b/addons/html_editor/static/src/main/font/color_plugin.js @@ -16,7 +16,13 @@ import { import { closestElement, descendants } from "@html_editor/utils/dom_traversal"; import { reactive } from "@odoo/owl"; import { _t } from "@web/core/l10n/translation"; -import { isColorGradient, isCSSColor, RGBA_REGEX, rgbaToHex } from "@web/core/utils/colors"; +import { + isColorGradient, + isCSSColor, + RGBA_REGEX, + rgbaToHex, + COLOR_COMBINATION_CLASSES_REGEX, +} from "@web/core/utils/colors"; import { ColorSelector } from "./color_selector"; const RGBA_OPACITY = 0.6; @@ -35,6 +41,7 @@ export class ColorPlugin extends Plugin { "getPropsForColorSelector", "removeAllColor", "getElementColors", + "getColorCombination", ]; resources = { user_commands: [ @@ -63,6 +70,7 @@ export class ColorPlugin extends Plugin { /** Handlers */ selectionchange_handlers: this.updateSelectedColor.bind(this), remove_format_handlers: this.removeAllColor.bind(this), + color_combination_getters: getColorCombinationFromClass, /** Overridables */ /** @@ -463,4 +471,17 @@ export class ColorPlugin extends Plugin { this.delegateTo("apply_color_style", element, mode, color); } } + + getColorCombination(el, actionParam) { + for (const handler of this.getResource("color_combination_getters")) { + const value = handler(el, actionParam); + if (value) { + return value; + } + } + } +} + +function getColorCombinationFromClass(el) { + return el.className.match?.(COLOR_COMBINATION_CLASSES_REGEX)?.[0]; } From e20ef45ebb1d1062af04a81142eda40ab2905fc3 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Fri, 9 May 2025 14:24:51 +0200 Subject: [PATCH 157/240] theme tab: color picker enabled tabs --- .../website_builder/plugins/theme/theme_advanced_option.xml | 4 ++++ .../src/website_builder/plugins/theme/theme_colors_option.xml | 1 + .../static/src/website_builder/plugins/theme/theme_tab.xml | 2 ++ 3 files changed, 7 insertions(+) diff --git a/addons/html_builder/static/src/website_builder/plugins/theme/theme_advanced_option.xml b/addons/html_builder/static/src/website_builder/plugins/theme/theme_advanced_option.xml index 67947defe1f13..7e9a83f1b97ac 100644 --- a/addons/html_builder/static/src/website_builder/plugins/theme/theme_advanced_option.xml +++ b/addons/html_builder/static/src/website_builder/plugins/theme/theme_advanced_option.xml @@ -18,21 +18,25 @@ @@ -300,6 +301,7 @@ From f21abe71e23d306ddaae60a89db8876c61c53389 Mon Sep 17 00:00:00 2001 From: Serhii Rubanskyi - seru Date: Mon, 12 May 2025 10:16:15 +0200 Subject: [PATCH 158/240] fix progressBarValue apply logic remove % to prevent NaN --- .../plugins/options/progress_bar_option_plugin.js | 1 + 1 file changed, 1 insertion(+) diff --git a/addons/html_builder/static/src/website_builder/plugins/options/progress_bar_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/progress_bar_option_plugin.js index ad5c7240a30e1..47cda958152b3 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/progress_bar_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/progress_bar_option_plugin.js @@ -69,6 +69,7 @@ class ProgressBarOptionPlugin extends Plugin { }, progressBarValue: { apply: ({ editingElement, value }) => { + value = parseInt(value); value = clamp(value, 0, 100); const progressBarEl = editingElement.querySelector(".progress-bar"); const progressBarTextEl = editingElement.querySelector(".s_progress_bar_text"); From 26977ecb5c7d49f07a6f11b7c7d13f3f6b282c6a Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Tue, 13 May 2025 13:31:30 +0200 Subject: [PATCH 159/240] remove duplicate enabledTabs props --- .../src/website_builder/plugins/theme/theme_colors_option.xml | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/theme/theme_colors_option.xml b/addons/html_builder/static/src/website_builder/plugins/theme/theme_colors_option.xml index 4b8a7cc1e447c..48bdfb262247e 100644 --- a/addons/html_builder/static/src/website_builder/plugins/theme/theme_colors_option.xml +++ b/addons/html_builder/static/src/website_builder/plugins/theme/theme_colors_option.xml @@ -110,7 +110,6 @@ enabledTabs="['solid', 'custom', 'gradient']" action="'customizeWebsiteColor'" actionParam="{ mainParam: `o-cc${preset.id}-bg`, gradientColor: `o-cc${preset.id}-bg-gradient` }" - enabledTabs="['solid', 'custom']" /> From 3e36468d514e821252bfa22d5a6108e3fa92657a Mon Sep 17 00:00:00 2001 From: panv-odoo Date: Mon, 28 Apr 2025 18:36:23 +0530 Subject: [PATCH 160/240] [FIX] html_builder: fix default recipient email based on company email Prior to this commit, the default recipient email address used in the website form options was not being updated based on the company email. Instead, it was showing a placeholder/default email address. This commit fixes this issue by allowing the website form to use the default `email_to` from the company email. If the company email is not present, it will use the default email address. --- .../website_builder/plugins/form/form_option_plugin.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js index daa9f906d956c..6a1169a18aa5c 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js @@ -31,6 +31,7 @@ import { replaceFieldElement, setActiveProperties, setVisibilityDependency, + getParsedDataFor, } from "./utils"; import { SyncCache } from "@html_builder/utils/sync_cache"; import { _t } from "@web/core/l10n/translation"; @@ -216,6 +217,13 @@ export class FormOptionPlugin extends Plugin { if (value && value !== this.defaultEmailToValue) { return value; } + // Get the email_to value from the data-for attribute if it exists. + // We use it if there is no value on the email_to input. + const formId = el.id; + const dataForValues = getParsedDataFor(formId, el.ownerDocument); + if (dataForValues) { + this.dataForEmailTo = dataForValues["email_to"]; + } return this.dataForEmailTo || this.defaultEmailToValue; } if (value) { From e8c0b7ea5a86d46fab7c92b8cee1a44a8fdc7ece Mon Sep 17 00:00:00 2001 From: panv-odoo Date: Tue, 29 Apr 2025 14:36:12 +0530 Subject: [PATCH 161/240] [IMP] website: Adapt and enable website tours Enabled following tours: - website_form_contactus_edition_no_email - website_form_contactus_submit --- .../src/website_builder/plugins/form/form_option_plugin.js | 5 +---- addons/website/tests/test_website_form_editor.py | 1 - 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js index 6a1169a18aa5c..e877ff560615c 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js @@ -221,10 +221,7 @@ export class FormOptionPlugin extends Plugin { // We use it if there is no value on the email_to input. const formId = el.id; const dataForValues = getParsedDataFor(formId, el.ownerDocument); - if (dataForValues) { - this.dataForEmailTo = dataForValues["email_to"]; - } - return this.dataForEmailTo || this.defaultEmailToValue; + return dataForValues["email_to"] || this.defaultEmailToValue } if (value) { return value; diff --git a/addons/website/tests/test_website_form_editor.py b/addons/website/tests/test_website_form_editor.py index ac2f09998103a..8aeb2d3c51f2c 100644 --- a/addons/website/tests/test_website_form_editor.py +++ b/addons/website/tests/test_website_form_editor.py @@ -36,7 +36,6 @@ def test_website_form_contact_us_edition_with_email(self): 'test@test.test', 'The email was edited, the form should have been sent to the configured email') - @unittest.skip def test_website_form_contact_us_edition_no_email(self): self.env.company.email = 'website_form_contactus_edition_no_email@mail.com' self.start_tour('/odoo', 'website_form_contactus_edition_no_email', login="admin") From 0489fe0964e41097ce6f50100796e0a9753ae811 Mon Sep 17 00:00:00 2001 From: "Augustin (duau)" Date: Mon, 12 May 2025 16:49:28 +0200 Subject: [PATCH 162/240] lint html_builder --- .../src/plugins/header_navbar_option.js | 11 +- .../plugins/header_navbar_option_plugin.js | 37 +++--- .../src/plugins/snippets_powerbox_plugin.js | 9 +- .../highlight/highlight_configurator.js | 2 +- .../options/website_info_option_plugin.js | 28 ++-- .../website_crm_partner_assign_option.js | 22 +-- ...ebsite_crm_partner_assign_option_plugin.js | 28 ++-- .../website_hr_recruitment_option_plugin.js | 28 ++-- .../website_members_page_option_plugin.js | 28 ++-- .../src/website_sale/products_item_option.js | 125 +++++++++--------- .../builder_many2one.test.js | 1 - .../builder_components/builder_row.test.js | 12 +- .../static/tests/snippets_getter.hoot.js | 13 +- 13 files changed, 167 insertions(+), 177 deletions(-) diff --git a/addons/html_builder/static/src/plugins/header_navbar_option.js b/addons/html_builder/static/src/plugins/header_navbar_option.js index fc0254490228c..91698bba1a964 100644 --- a/addons/html_builder/static/src/plugins/header_navbar_option.js +++ b/addons/html_builder/static/src/plugins/header_navbar_option.js @@ -1,6 +1,5 @@ import { BaseOptionComponent } from "@html_builder/core/utils"; -import { onMounted, onWillStart } from "@odoo/owl"; - +import { onWillStart } from "@odoo/owl"; export class HeaderNavbarOption extends BaseOptionComponent { static template = "html_builder.HeaderNavbarOption"; @@ -12,14 +11,14 @@ export class HeaderNavbarOption extends BaseOptionComponent { this.currentActiveViews = {}; onWillStart(async () => { this.currentActiveViews = await this.props.getCurrentActiveViews(); - }); + }); } hasSomeViews(views) { - for (const view of views){ - if (this.currentActiveViews[view]){ + for (const view of views) { + if (this.currentActiveViews[view]) { return true; - } + } } return false; } diff --git a/addons/html_builder/static/src/plugins/header_navbar_option_plugin.js b/addons/html_builder/static/src/plugins/header_navbar_option_plugin.js index 9b1da349df171..e8f8f37b15d1b 100644 --- a/addons/html_builder/static/src/plugins/header_navbar_option_plugin.js +++ b/addons/html_builder/static/src/plugins/header_navbar_option_plugin.js @@ -2,7 +2,6 @@ import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; import { HeaderNavbarOption } from "./header_navbar_option"; - class HeaderNavbarOptionPlugin extends Plugin { static id = "HeaderNavbarOptionPlugin"; static dependencies = ["customizeWebsite"]; @@ -22,32 +21,30 @@ class HeaderNavbarOptionPlugin extends Plugin { ], }; - setup(){ + setup() { this.keys = [ - 'website.template_header_default', - 'website.template_header_hamburger', - 'website.template_header_boxed', - 'website.template_header_stretch', - 'website.template_header_vertical', - 'website.template_header_search', - 'website.template_header_sales_one', - 'website.template_header_sales_two', - 'website.template_header_sales_three', - 'website.template_header_sales_four', - 'website.template_header_sidebar' + "website.template_header_default", + "website.template_header_hamburger", + "website.template_header_boxed", + "website.template_header_stretch", + "website.template_header_vertical", + "website.template_header_search", + "website.template_header_sales_one", + "website.template_header_sales_two", + "website.template_header_sales_three", + "website.template_header_sales_four", + "website.template_header_sidebar", ]; } - async getCurrentActiveViews(){ - const actionParams = {views: this.keys}; + async getCurrentActiveViews() { + const actionParams = { views: this.keys }; await this.dependencies.customizeWebsite.loadConfigKey(actionParams); - let currentActiveViews = {}; - for (const key of this.keys) - { - let isActive = this.dependencies.customizeWebsite.getConfigKey(key); + const currentActiveViews = {}; + for (const key of this.keys) { + const isActive = this.dependencies.customizeWebsite.getConfigKey(key); currentActiveViews[key] = isActive; } return currentActiveViews; } } registry.category("website-plugins").add(HeaderNavbarOptionPlugin.id, HeaderNavbarOptionPlugin); - diff --git a/addons/html_builder/static/src/plugins/snippets_powerbox_plugin.js b/addons/html_builder/static/src/plugins/snippets_powerbox_plugin.js index 59dd8370f4b51..4426676a67a08 100644 --- a/addons/html_builder/static/src/plugins/snippets_powerbox_plugin.js +++ b/addons/html_builder/static/src/plugins/snippets_powerbox_plugin.js @@ -1,4 +1,4 @@ -import { Plugin } from "@html_editor/plugin" +import { Plugin } from "@html_editor/plugin"; import { _t } from "@web/core/l10n/translation"; import { withSequence } from "@html_editor/utils/resource"; import { registry } from "@web/core/registry"; @@ -125,10 +125,13 @@ class SnippetsPowerboxPlugin extends Plugin { commandId: "s_hr", }, ], - } + }; insertSnippet(name) { - const snippet = this.services["html_builder.snippets"].getSnippetByName("snippet_content", name); + const snippet = this.services["html_builder.snippets"].getSnippetByName( + "snippet_content", + name + ); const content = snippet.content.cloneNode(true); this.dependencies.dom.insert(content); this.dependencies.history.addStep(); diff --git a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.js b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.js index cb0d5b9b9926a..c0f645b6beb24 100644 --- a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.js +++ b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.js @@ -1,4 +1,4 @@ -import { Component, onMounted, useEffect, useRef, useState } from "@odoo/owl"; +import { Component, onMounted, useRef, useState } from "@odoo/owl"; import { ColorPicker } from "@web/core/color_picker/color_picker"; import { HighlightPicker } from "./highlight_picker"; import { applyTextHighlight } from "@website/js/highlight_utils"; diff --git a/addons/html_builder/static/src/website_builder/plugins/options/website_info_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/website_info_option_plugin.js index 98958bd9d1620..4c1e992f2dc66 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/website_info_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/website_info_option_plugin.js @@ -3,20 +3,18 @@ import { _t } from "@web/core/l10n/translation"; import { registry } from "@web/core/registry"; class WebsiteInfoPageOption extends Plugin { - static id = "websiteInfoPageOption"; - resources = { - builder_options: [ - { - template: "website.InfoPageOption", - selector: "main:has(.o_website_info)", - title: _t("Info Page"), - editableOnly: false, - groups: ["website.group_website_designer"], - }, - ], - }; + static id = "websiteInfoPageOption"; + resources = { + builder_options: [ + { + template: "website.InfoPageOption", + selector: "main:has(.o_website_info)", + title: _t("Info Page"), + editableOnly: false, + groups: ["website.group_website_designer"], + }, + ], + }; } -registry - .category("website-plugins") - .add(WebsiteInfoPageOption.id, WebsiteInfoPageOption); +registry.category("website-plugins").add(WebsiteInfoPageOption.id, WebsiteInfoPageOption); diff --git a/addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option.js b/addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option.js index 3110ff19a66d8..61503a1b56d7d 100644 --- a/addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option.js +++ b/addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option.js @@ -3,17 +3,17 @@ import { useState, onWillStart } from "@odoo/owl"; import { useService } from "@web/core/utils/hooks"; export class WebsiteCRMPartnersPage extends BaseOptionComponent { - static template = "website_crm_partner_assign.PartnersPageOption"; + static template = "website_crm_partner_assign.PartnersPageOption"; - setup() { - super.setup(); - this.googleMaps = useService("google_maps"); - this.state = useState({ - has_google_maps_api_key: false, - }); + setup() { + super.setup(); + this.googleMaps = useService("google_maps"); + this.state = useState({ + has_google_maps_api_key: false, + }); - onWillStart(async () => { - this.state.has_google_maps_api_key = !!(await this.googleMaps.getGMapsAPIKey(false)); - }); - } + onWillStart(async () => { + this.state.has_google_maps_api_key = !!(await this.googleMaps.getGMapsAPIKey(false)); + }); + } } diff --git a/addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option_plugin.js b/addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option_plugin.js index a869027e93d2e..34de3eae5fa47 100644 --- a/addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option_plugin.js +++ b/addons/html_builder/static/src/website_crm_partner_assign/website_crm_partner_assign_option_plugin.js @@ -4,21 +4,21 @@ import { registry } from "@web/core/registry"; import { WebsiteCRMPartnersPage } from "./website_crm_partner_assign_option"; class WebsiteCRMPartnersPageOption extends Plugin { - static id = "websiteCRMPartnersPageOption"; + static id = "websiteCRMPartnersPageOption"; - resources = { - builder_options: [ - { - OptionComponent: WebsiteCRMPartnersPage, - selector: "main:has(#oe_structure_website_crm_partner_assign_layout_1)", - title: _t("Partners Page"), - editableOnly: false, - groups: ["website.group_website_designer"], - }, - ], - }; + resources = { + builder_options: [ + { + OptionComponent: WebsiteCRMPartnersPage, + selector: "main:has(#oe_structure_website_crm_partner_assign_layout_1)", + title: _t("Partners Page"), + editableOnly: false, + groups: ["website.group_website_designer"], + }, + ], + }; } registry - .category("website-plugins") - .add(WebsiteCRMPartnersPageOption.id, WebsiteCRMPartnersPageOption); + .category("website-plugins") + .add(WebsiteCRMPartnersPageOption.id, WebsiteCRMPartnersPageOption); diff --git a/addons/html_builder/static/src/website_hr_recruitment/website_hr_recruitment_option_plugin.js b/addons/html_builder/static/src/website_hr_recruitment/website_hr_recruitment_option_plugin.js index df945fae8da1c..80a4fe06e15b4 100644 --- a/addons/html_builder/static/src/website_hr_recruitment/website_hr_recruitment_option_plugin.js +++ b/addons/html_builder/static/src/website_hr_recruitment/website_hr_recruitment_option_plugin.js @@ -3,20 +3,20 @@ import { _t } from "@web/core/l10n/translation"; import { registry } from "@web/core/registry"; class WebsiteHrRecruitmentPageOption extends Plugin { - static id = "websiteHrRecruitmentPageOption"; - resources = { - builder_options: [ - { - template: "website_hr_recruitment.JobsPageOption", - selector: "main:has(.o_website_hr_recruitment_jobs_list)", - title: _t("Jobs Page"), - editableOnly: false, - groups: ["website.group_website_designer"], - }, - ], - }; + static id = "websiteHrRecruitmentPageOption"; + resources = { + builder_options: [ + { + template: "website_hr_recruitment.JobsPageOption", + selector: "main:has(.o_website_hr_recruitment_jobs_list)", + title: _t("Jobs Page"), + editableOnly: false, + groups: ["website.group_website_designer"], + }, + ], + }; } registry - .category("website-plugins") - .add(WebsiteHrRecruitmentPageOption.id, WebsiteHrRecruitmentPageOption); + .category("website-plugins") + .add(WebsiteHrRecruitmentPageOption.id, WebsiteHrRecruitmentPageOption); diff --git a/addons/html_builder/static/src/website_membership/website_members_page_option_plugin.js b/addons/html_builder/static/src/website_membership/website_members_page_option_plugin.js index 0f75bececa4e9..d4bb9dfb68f9e 100644 --- a/addons/html_builder/static/src/website_membership/website_members_page_option_plugin.js +++ b/addons/html_builder/static/src/website_membership/website_members_page_option_plugin.js @@ -3,20 +3,18 @@ import { _t } from "@web/core/l10n/translation"; import { registry } from "@web/core/registry"; class WebsiteMembersPageOption extends Plugin { - static id = "websiteMembersPageOption"; - resources = { - builder_options: [ - { - template: "website_membership.MembersPageOption", - selector: "main:has(#oe_structure_website_membership_index_1)", - title: _t("Members Page"), - editableOnly: false, - groups: ["website.group_website_designer"], - }, - ], - }; + static id = "websiteMembersPageOption"; + resources = { + builder_options: [ + { + template: "website_membership.MembersPageOption", + selector: "main:has(#oe_structure_website_membership_index_1)", + title: _t("Members Page"), + editableOnly: false, + groups: ["website.group_website_designer"], + }, + ], + }; } -registry - .category("website-plugins") - .add(WebsiteMembersPageOption.id, WebsiteMembersPageOption); +registry.category("website-plugins").add(WebsiteMembersPageOption.id, WebsiteMembersPageOption); diff --git a/addons/html_builder/static/src/website_sale/products_item_option.js b/addons/html_builder/static/src/website_sale/products_item_option.js index 58e3b81c48a2a..2caf0f16b7c76 100644 --- a/addons/html_builder/static/src/website_sale/products_item_option.js +++ b/addons/html_builder/static/src/website_sale/products_item_option.js @@ -3,80 +3,75 @@ import { onWillStart, onMounted, useState, useRef } from "@odoo/owl"; import { useService } from "@web/core/utils/hooks"; export class ProductsItemOption extends BaseOptionComponent { - static template = "website_sale.ProductsItemOptionPlugin"; - static props = { - loadInfo: Function, - itemSize: Object, - count: Object, - }; - - setup() { - super.setup(); - this.orm = useService("orm"); - this.tableRef = useRef("table"); - - this.state = useState({ - ribbons: [], - ribbonEditMode: false, - itemSize: this.props.itemSize, - }); - - onWillStart(async () => { - const [ribbons, defaultSort] = await this.props.loadInfo(); - this.state.ribbons = ribbons; - this.defaultSort = defaultSort; - - // need to display "re-order" option only if shop_default_sort is 'website_sequence asc' - this.displayReOrder = - this.defaultSort[0].shop_default_sort === "website_sequence asc"; - }); - - onMounted(() => { - this.addClassToTableCells( - this.state.itemSize.x, - this.state.itemSize.y, - "selected" - ); - }); - } - - addClassToTableCells(x, y, className) { - const table = this.tableRef.el; - - const rows = table.rows; - for (let row = 0; row < y; row++) { - const cells = rows[row].cells; - for (let col = 0; col < x; col++) { - cells[col].classList.add(className); - } + static template = "website_sale.ProductsItemOptionPlugin"; + static props = { + loadInfo: Function, + itemSize: Object, + count: Object, + }; + + setup() { + super.setup(); + this.orm = useService("orm"); + this.tableRef = useRef("table"); + + this.state = useState({ + ribbons: [], + ribbonEditMode: false, + itemSize: this.props.itemSize, + }); + + onWillStart(async () => { + const [ribbons, defaultSort] = await this.props.loadInfo(); + this.state.ribbons = ribbons; + this.defaultSort = defaultSort; + + // need to display "re-order" option only if shop_default_sort is 'website_sequence asc' + this.displayReOrder = this.defaultSort[0].shop_default_sort === "website_sequence asc"; + }); + + onMounted(() => { + this.addClassToTableCells(this.state.itemSize.x, this.state.itemSize.y, "selected"); + }); } - } - _onTableMouseEnter(ev) { - ev.currentTarget.classList.add("oe_hover"); - } + addClassToTableCells(x, y, className) { + const table = this.tableRef.el; - _onTableMouseLeave(ev) { - ev.currentTarget.classList.remove("oe_hover"); - } + const rows = table.rows; + for (let row = 0; row < y; row++) { + const cells = rows[row].cells; + for (let col = 0; col < x; col++) { + cells[col].classList.add(className); + } + } + } - _onTableCellMouseOver(i, j) { - const allCells = this.tableRef.el.querySelectorAll("td.select"); + _onTableMouseEnter(ev) { + ev.currentTarget.classList.add("oe_hover"); + } - for (let cell of allCells) { - cell.classList.remove("select"); + _onTableMouseLeave(ev) { + ev.currentTarget.classList.remove("oe_hover"); } - this.addClassToTableCells(j + 1, i + 1, "select"); - } + _onTableCellMouseOver(i, j) { + const allCells = this.tableRef.el.querySelectorAll("td.select"); - _onTableCellMouseClick(i, j) { - const allCells = this.tableRef.el.querySelectorAll("td.selected"); + for (const cell of allCells) { + cell.classList.remove("select"); + } - for (let cell of allCells) { - cell.classList.remove("selected"); + this.addClassToTableCells(j + 1, i + 1, "select"); } - this.addClassToTableCells(j + 1, i + 1, "selected"); - } + _onTableCellMouseClick(i, j) { + const allCells = this.tableRef.el.querySelectorAll("td.selected"); + + for (const cell of allCells) { + cell.classList.remove("selected"); + } + + this.addClassToTableCells(j + 1, i + 1, "selected"); + } } diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/builder_many2one.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/builder_many2one.test.js index ce55a4c8dfdeb..7d32c13889bc7 100644 --- a/addons/html_builder/static/tests/custom_tab/builder_components/builder_many2one.test.js +++ b/addons/html_builder/static/tests/custom_tab/builder_components/builder_many2one.test.js @@ -1,7 +1,6 @@ import { expect, test } from "@odoo/hoot"; import { animationFrame, Deferred } from "@odoo/hoot-mock"; import { xml } from "@odoo/owl"; -import { delay } from "@web/core/utils/concurrency"; import { contains, defineModels, fields, models, onRpc } from "@web/../tests/web_test_helpers"; import { addActionOption, diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/builder_row.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/builder_row.test.js index c2ba906329130..ddca27754da86 100644 --- a/addons/html_builder/static/tests/custom_tab/builder_components/builder_row.test.js +++ b/addons/html_builder/static/tests/custom_tab/builder_components/builder_row.test.js @@ -53,7 +53,9 @@ describe("website tests", () => { `, }); - await setupWebsiteBuilder(`
b
`); + await setupWebsiteBuilder( + `
b
` + ); const selectorRowLabel = ".options-container .hb-row:not(.d-none) .hb-row-label"; await contains(":iframe .parent-target").click(); expect(queryAllTexts(selectorRowLabel)).toEqual(["Row 1", "Row 2"]); @@ -65,7 +67,9 @@ describe("website tests", () => { /* ================= Collapse template ================= */ const collapseOptionTemplate = (dependency = false, expand = false) => xml` - A + A { await animationFrame(); expect(".o_we_collapse_toggler:not(.d-none)").toHaveCount(2); expect(".o_we_collapse_toggler:not(.d-none):first").toHaveClass("active"); - expect(".o_we_collapse_toggler:not(.d-none):not(.d-none):last").not.toHaveClass("active"); + expect(".o_we_collapse_toggler:not(.d-none):not(.d-none):last").not.toHaveClass( + "active" + ); await contains(".options-container .o_we_collapse_toggler:not(.d-none):last").click(); expect(".o_we_collapse_toggler:not(.d-none):first").toHaveClass("active"); expect(".o_we_collapse_toggler:not(.d-none):last").toHaveClass("active"); diff --git a/addons/html_builder/static/tests/snippets_getter.hoot.js b/addons/html_builder/static/tests/snippets_getter.hoot.js index 0adde95e91bd4..c913f92ac5368 100644 --- a/addons/html_builder/static/tests/snippets_getter.hoot.js +++ b/addons/html_builder/static/tests/snippets_getter.hoot.js @@ -2,13 +2,13 @@ import { realOrm } from "@web/../tests/_framework/module_set.hoot"; function removeImageSrc(xmlString) { const doc = new DOMParser().parseFromString(xmlString, "text/html"); - for (let img of doc.getElementsByTagName("img")) { + for (const img of doc.getElementsByTagName("img")) { img.removeAttribute("src"); } const elementsWithBackgroundImage = doc.querySelectorAll('[style*="background-image"]'); - for (let el of elementsWithBackgroundImage) { + for (const el of elementsWithBackgroundImage) { const style = el.getAttribute("style"); - const newStyle = style.replace(/background-image\s*:\s*url\([^\)]+\);?/g, ''); // Remove background-image rule + const newStyle = style.replace(/background-image\s*:\s*url\([^)]+\);?/g, ""); // Remove background-image rule el.setAttribute("style", newStyle); } return new XMLSerializer().serializeToString(doc); @@ -17,12 +17,7 @@ function removeImageSrc(xmlString) { let websiteSnippets; export const getWebsiteSnippets = async () => { if (!websiteSnippets) { - const str = await realOrm( - "ir.ui.view", - "render_public_asset", - ["website.snippets"], - {} - ); + const str = await realOrm("ir.ui.view", "render_public_asset", ["website.snippets"], {}); websiteSnippets = removeImageSrc(str.trim()); } return websiteSnippets; From 9fc5112a1c63d30105d7d2c7d898d737bd78977c Mon Sep 17 00:00:00 2001 From: FrancoisGe Date: Tue, 13 May 2025 16:48:57 +0200 Subject: [PATCH 163/240] fix red branch --- .../src/website_builder/plugins/form/form_option_plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js index e877ff560615c..5e12e34d41785 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js @@ -221,7 +221,7 @@ export class FormOptionPlugin extends Plugin { // We use it if there is no value on the email_to input. const formId = el.id; const dataForValues = getParsedDataFor(formId, el.ownerDocument); - return dataForValues["email_to"] || this.defaultEmailToValue + return dataForValues?.["email_to"] || this.defaultEmailToValue; } if (value) { return value; From cf225b25d1b4c15f08d28b00970038711403c557 Mon Sep 17 00:00:00 2001 From: Davide Bonetto Date: Tue, 13 May 2025 12:09:47 +0200 Subject: [PATCH 164/240] [FIX] html_editor: link popover icon size fix --- .../static/src/main/link/link_popover.scss | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/addons/html_editor/static/src/main/link/link_popover.scss b/addons/html_editor/static/src/main/link/link_popover.scss index c712c65b98e8a..bf3a0e575eb2a 100644 --- a/addons/html_editor/static/src/main/link/link_popover.scss +++ b/addons/html_editor/static/src/main/link/link_popover.scss @@ -1,6 +1,13 @@ -.o_we_preview_favicon .o_image { - max-width: 100%; - max-height: 100%; - background-position: top; - margin-top: 0.3em +.o_we_preview_favicon { + .o_image { + max-width: 100%; + max-height: 100%; + background-position: top; + margin-top: 0.3em; + } + + > img { + max-height: 16px; + max-width: 16px; + } } From d9f83ded466318783519d3e020ad9d40eb2fdb45 Mon Sep 17 00:00:00 2001 From: Serhii Rubanskyi - seru Date: Wed, 14 May 2025 10:10:25 +0200 Subject: [PATCH 165/240] add missing action for customizing buttons font --- .../static/src/website_builder/plugins/theme/theme_tab.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/theme/theme_tab.xml b/addons/html_builder/static/src/website_builder/plugins/theme/theme_tab.xml index adc61298d64d7..ffb3ef234a233 100644 --- a/addons/html_builder/static/src/website_builder/plugins/theme/theme_tab.xml +++ b/addons/html_builder/static/src/website_builder/plugins/theme/theme_tab.xml @@ -190,7 +190,7 @@ > - + Date: Fri, 11 Apr 2025 15:28:41 +0200 Subject: [PATCH 166/240] collapse plugin --- .../plugins/collapse_plugin.js | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 addons/html_builder/static/src/website_builder/plugins/collapse_plugin.js diff --git a/addons/html_builder/static/src/website_builder/plugins/collapse_plugin.js b/addons/html_builder/static/src/website_builder/plugins/collapse_plugin.js new file mode 100644 index 0000000000000..22f8eea600c59 --- /dev/null +++ b/addons/html_builder/static/src/website_builder/plugins/collapse_plugin.js @@ -0,0 +1,69 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; + +export class CollapsePlugin extends Plugin { + static id = "collapse"; + + resources = { + on_snippet_dropped_handlers: this.onSnippetDropped.bind(this), + on_cloned_handlers: this.onCloned.bind(this), + dropzone_selector: [ + { + selector: ".accordion-item", + dropLockWithin: ".accordion", + }, + ], + }; + + setup() { + this.time = new Date().getTime(); + this.body = this.document.body; + } + + onSnippetDropped({ snippetEl }) { + const accordionItemsEls = snippetEl.querySelectorAll(".accordion > .accordion-item"); + accordionItemsEls.forEach((accordionItemEl) => { + this.createIDs(accordionItemEl); + }); + } + + onCloned({ cloneEl }) { + const arrayOfAccordionItemEls = cloneEl.matches(".accordion > .accordion-item") + ? [cloneEl] + : [...cloneEl.querySelectorAll(".accordion > .accordion-item")]; + + for (const accordionItemEl of arrayOfAccordionItemEls) { + this.createIDs(accordionItemEl); + } + } + + createIDs(editingElement) { + const accordionEl = editingElement.closest(".accordion"); + const accordionBtnEl = editingElement.querySelector(".accordion-button"); + const accordionContentEl = editingElement.querySelector('[role="region"]'); + + const setUniqueId = (el, label) => { + let elemId = el.id; + if (!elemId || this.body.querySelectorAll(`#${elemId}`).length > 1) { + do { + this.time++; + elemId = `${label}${this.time}`; + } while (this.body.querySelector(`#${elemId}`)); + el.id = elemId; + } + return elemId; + }; + + const accordionId = setUniqueId(accordionEl, "myCollapse"); + accordionContentEl.dataset.bsParent = `#${accordionId}`; + + const contentId = setUniqueId(accordionContentEl, "myCollapseTab"); + accordionBtnEl.dataset.bsTarget = `#${contentId}`; + accordionBtnEl.setAttribute("aria-controls", contentId); + + const buttonId = setUniqueId(accordionBtnEl, "myCollapseBtn"); + accordionContentEl.setAttribute("aria-labelledby", buttonId); + } +} + +registry.category("website-plugins").add(CollapsePlugin.id, CollapsePlugin); From 323719d02d9679fe21ec548d80a239d393421932 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Thu, 8 May 2025 13:02:00 +0200 Subject: [PATCH 167/240] Add tests for drag and drop --- .../static/tests/drag_and_drop.test.js | 38 ++++++ .../website_builder/drag_and_drop.test.js | 121 ++++++++++++++++++ .../static/tests/website_helpers.js | 7 + 3 files changed, 166 insertions(+) create mode 100644 addons/html_builder/static/tests/drag_and_drop.test.js create mode 100644 addons/html_builder/static/tests/website_builder/drag_and_drop.test.js diff --git a/addons/html_builder/static/tests/drag_and_drop.test.js b/addons/html_builder/static/tests/drag_and_drop.test.js new file mode 100644 index 0000000000000..fe2400f3dfdb0 --- /dev/null +++ b/addons/html_builder/static/tests/drag_and_drop.test.js @@ -0,0 +1,38 @@ +import { expect, test } from "@odoo/hoot"; +import { contains } from "@web/../tests/web_test_helpers"; +import { setupHTMLBuilder } from "./helpers"; +import { getDragMoveHelper, waitForEndOfOperation } from "./website_helpers"; + +const dropzoneSelectors = { + selector: "section", + dropNear: "section", +}; + +test("Drag and drop basic test", async () => { + await setupHTMLBuilder( + ` +

Text 1

+

Text 2

+ `, + { dropzoneSelectors } + ); + + await contains(":iframe section.section-1").click(); + expect(".overlay .o_overlay_options .o_move_handle.o_draggable").toHaveCount(1); + expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled(); + + const { moveTo, drop } = await contains(".o_overlay_options .o_move_handle").drag(); + expect(":iframe .oe_drop_zone").toHaveCount(2); + expect(":iframe .oe_drop_zone:nth-child(1)").toHaveCount(1); + expect(":iframe .oe_drop_zone:nth-child(3)").toHaveCount(1); + + await moveTo(":iframe .oe_drop_zone:nth-child(3)"); + expect(":iframe .oe_drop_zone:nth-child(3)").toHaveClass("invisible"); + expect(":iframe section.section-1:nth-child(4)").toHaveCount(1); + + await drop(getDragMoveHelper()); + expect(":iframe .oe_drop_zone").toHaveCount(0); + expect(":iframe section.section-1:nth-child(2)").toHaveCount(1); + await waitForEndOfOperation(); + expect(".o-website-builder_sidebar .fa-undo").toBeEnabled(); +}); diff --git a/addons/html_builder/static/tests/website_builder/drag_and_drop.test.js b/addons/html_builder/static/tests/website_builder/drag_and_drop.test.js new file mode 100644 index 0000000000000..a8fa404306787 --- /dev/null +++ b/addons/html_builder/static/tests/website_builder/drag_and_drop.test.js @@ -0,0 +1,121 @@ +import { expect, test } from "@odoo/hoot"; +import { contains } from "@web/../tests/web_test_helpers"; +import { + defineWebsiteModels, + dummyBase64Img, + getDragMoveHelper, + setupWebsiteBuilderWithSnippet, + waitForEndOfOperation, +} from "../website_helpers"; + +defineWebsiteModels(); + +test("Drag and drop a section and then undo", async () => { + await setupWebsiteBuilderWithSnippet(["s_text_image", "s_three_columns"]); + await contains(":iframe section.s_text_image").click(); + expect(".overlay .o_overlay_options .o_move_handle.o_draggable").toHaveCount(1); + expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled(); + + const { moveTo, drop } = await contains(".o_overlay_options .o_move_handle").drag(); + expect(":iframe .oe_drop_zone").toHaveCount(2); + expect(":iframe .oe_drop_zone:nth-child(1)").toHaveCount(1); + expect(":iframe .oe_drop_zone:nth-child(3)").toHaveCount(1); + + await moveTo(":iframe .oe_drop_zone:nth-child(3)"); + expect(":iframe .oe_drop_zone:nth-child(3)").toHaveClass("invisible"); + expect(":iframe section.s_text_image:nth-child(4)").toHaveCount(1); + + await drop(getDragMoveHelper()); + expect(":iframe .oe_drop_zone").toHaveCount(0); + expect(":iframe section.s_text_image:nth-child(2)").toHaveCount(1); + await waitForEndOfOperation(); + expect(".o-website-builder_sidebar .fa-undo").toBeEnabled(); + + await contains(".o-website-builder_sidebar .fa-undo").click(); + expect(":iframe section.s_text_image:nth-child(1)").toHaveCount(1); +}); + +test("Drag and drop at the same position should not add a step in the history", async () => { + await setupWebsiteBuilderWithSnippet(["s_text_image", "s_three_columns"]); + await contains(":iframe section.s_text_image").click(); + expect(".overlay .o_overlay_options .o_move_handle.o_draggable").toHaveCount(1); + expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled(); + + const { moveTo, drop } = await contains(".o_overlay_options .o_move_handle").drag(); + expect(":iframe .oe_drop_zone").toHaveCount(2); + + await moveTo(":iframe .oe_drop_zone:nth-child(3)"); + expect(":iframe .oe_drop_zone:nth-child(3)").toHaveClass("invisible"); + expect(":iframe section.s_text_image:nth-child(4)").toHaveCount(1); + + await moveTo(":iframe .oe_drop_zone:nth-child(1)"); + expect(":iframe .oe_drop_zone:nth-child(1)").toHaveClass("invisible"); + expect(":iframe section.s_text_image:nth-child(2)").toHaveCount(1); + + await drop(getDragMoveHelper()); + expect(":iframe .oe_drop_zone").toHaveCount(0); + expect(":iframe section.s_text_image:nth-child(1)").toHaveCount(1); + await waitForEndOfOperation(); + expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled(); +}); + +test("Drag and drop a column toggles the grid mode", async () => { + await setupWebsiteBuilderWithSnippet(["s_text_image", "s_three_columns"], { + loadIframeBundles: true, + }); + await contains(":iframe section.s_text_image .row > div:nth-child(1)").click(); + expect(".overlay .o_overlay_options .o_move_handle.o_draggable").toHaveCount(1); + expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled(); + expect(":iframe section.s_text_image .row").not.toHaveClass("o_grid_mode"); + + const { moveTo, drop } = await contains(".o_overlay_options .o_move_handle").drag(); + expect(":iframe .oe_drop_zone.oe_grid_zone").toHaveCount(1); + expect(":iframe .oe_drop_zone:not(.oe_grid_zone)").toHaveCount(4); + + await moveTo(":iframe .oe_drop_zone.oe_grid_zone"); + expect(":iframe .oe_drop_zone.oe_grid_zone").toHaveClass("invisible"); + expect(":iframe section.s_text_image .row.o_grid_mode > .o_we_background_grid").toHaveCount(1); + expect(":iframe section.s_text_image .row > .o_we_drag_helper").toHaveCount(1); + + await drop(getDragMoveHelper()); + expect(":iframe .oe_drop_zone").toHaveCount(0); + expect(":iframe section.s_text_image .row > .o_we_background_grid").toHaveCount(0); + expect(":iframe section.s_text_image .row > .o_we_drag_helper").toHaveCount(0); + expect(":iframe section.s_text_image .row.o_grid_mode > .o_grid_item").toHaveCount(2); + await waitForEndOfOperation(); + expect(".o-website-builder_sidebar .fa-undo").toBeEnabled(); +}); + +test("Drag and drop an image should drag the closest draggable element but not if it is a section", async () => { + const { getEditableContent } = await setupWebsiteBuilderWithSnippet( + ["s_text_image", "s_three_columns"], + { loadIframeBundles: true } + ); + const editable = getEditableContent(); + const imageEl = editable.querySelector(".s_text_image img"); + imageEl.src = dummyBase64Img; + + await contains(":iframe section.s_text_image").click(); + expect(".overlay .o_overlay_options .o_move_handle").toHaveClass("o_draggable"); + expect(":iframe section.s_text_image").not.toHaveClass("o_draggable"); + + await contains(":iframe section.s_text_image img").click(); + expect(".overlay .o_overlay_options .o_move_handle").toHaveClass("o_draggable"); + expect(":iframe section.s_text_image .row > div:nth-child(2)").toHaveClass("o_draggable"); + + const { drop } = await contains(":iframe section.s_text_image img").drag(); + expect(":iframe .oe_drop_zone.oe_grid_zone").toHaveCount(1); + expect(":iframe .oe_drop_zone:not(.oe_grid_zone)").toHaveCount(4); + await drop(getDragMoveHelper()); +}); + +test("A column in mobile view should not be draggable", async () => { + await setupWebsiteBuilderWithSnippet("s_text_image"); + await contains("button[data-action='mobile']").click(); + + await contains(":iframe section.s_text_image").click(); + expect(".overlay .o_overlay_options .o_move_handle").toHaveClass("o_draggable"); + + await contains(":iframe section.s_text_image .row > div:nth-child(1)").click(); + expect(".overlay .o_overlay_options .o_move_handle").toHaveCount(0); +}); diff --git a/addons/html_builder/static/tests/website_helpers.js b/addons/html_builder/static/tests/website_helpers.js index a50c21b8e4b49..48d88870a98ef 100644 --- a/addons/html_builder/static/tests/website_helpers.js +++ b/addons/html_builder/static/tests/website_helpers.js @@ -503,6 +503,13 @@ export function getDragHelper() { return document.body.querySelector(".o_draggable_dragging .o_snippet_thumbnail"); } +/** + * Returns the dragged helper when drag and dropping elements from the page. + */ +export function getDragMoveHelper() { + return document.body.querySelector(".o_drag_move_helper"); +} + /** * Waits for the loading element added by the mutex to be removed, indicating * that the operation is over. From 50de41584106202269c4de6b0843ddb702a0c83b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Thu, 8 May 2025 14:32:38 +0200 Subject: [PATCH 168/240] Fix drop clone when only visible element --- .../html_builder/static/src/core/drag_and_drop_plugin.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/addons/html_builder/static/src/core/drag_and_drop_plugin.js b/addons/html_builder/static/src/core/drag_and_drop_plugin.js index 19552f585bfe8..f11a029e60bbe 100644 --- a/addons/html_builder/static/src/core/drag_and_drop_plugin.js +++ b/addons/html_builder/static/src/core/drag_and_drop_plugin.js @@ -5,7 +5,7 @@ import { getScrollingElement } from "@web/core/utils/scrolling"; import { closest, touching } from "@web/core/utils/ui"; import { clamp } from "@web/core/utils/numbers"; import { rowSize } from "@html_builder/utils/grid_layout_utils"; -import { isEditable } from "@html_builder/utils/utils"; +import { isEditable, isVisible } from "@html_builder/utils/utils"; import { DragAndDropMoveHandle } from "./drag_and_drop_move_handle"; export class DragAndDropPlugin extends Plugin { @@ -190,7 +190,10 @@ export class DragAndDropPlugin extends Plugin { this.dragState.startNextEl = this.overlayTarget.nextElementSibling; // Add a clone, to allow to drop where it started. - if (parentEl.children.length === 1) { + const visibleSiblingEl = [...parentEl.children].find( + (el) => el !== this.overlayTarget && isVisible(el) + ); + if (parentEl.children.length === 1 || !visibleSiblingEl) { const dropCloneEl = document.createElement("div"); dropCloneEl.classList.add("oe_drop_clone"); dropCloneEl.style.visibility = "hidden"; From 644c7112bed7dfa7d59b63874466ebf74b0f09a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Thu, 8 May 2025 16:50:47 +0200 Subject: [PATCH 169/240] Fix snippet group click exclude first 1/4 of viewport + fix dropzones --- .../static/src/sidebar/block_tab.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/addons/html_builder/static/src/sidebar/block_tab.js b/addons/html_builder/static/src/sidebar/block_tab.js index 8e9c37d2757ca..f994dbdc04e0b 100644 --- a/addons/html_builder/static/src/sidebar/block_tab.js +++ b/addons/html_builder/static/src/sidebar/block_tab.js @@ -53,27 +53,36 @@ export class BlockTab extends Component { this.shared.operation.next( async () => { let snippetEl; + const baseSectionEl = snippet.content.cloneNode(true); this.state.ongoingInsertion = true; await new Promise((resolve) => { this.snippetModel.openSnippetDialog(snippet, { onSelect: (snippet) => { snippetEl = snippet.content.cloneNode(true); - const selectors = this.shared.dropzone.getSelectors(snippetEl); - // Add the dropzones corresponding to the selected - // snippet and make them invisible. + + // Add the dropzones corresponding to a section and + // make them invisible. + const selectors = this.shared.dropzone.getSelectors(baseSectionEl); const dropzoneEls = this.shared.dropzone.activateDropzones(selectors); this.editable .querySelectorAll(".oe_drop_zone") .forEach((dropzoneEl) => dropzoneEl.classList.add("invisible")); // Find the dropzone closest to the center of the - // viewport. + // viewport and not located in the top quarter of + // the viewport. const iframeWindow = this.document.defaultView; const viewPortCenterPoint = { x: iframeWindow.innerWidth / 2, y: iframeWindow.innerHeight / 2, }; - const closestDropzoneEl = closest(dropzoneEls, viewPortCenterPoint); + const validDropzoneEls = dropzoneEls.filter( + (el) => el.getBoundingClientRect().top >= viewPortCenterPoint.y / 2 + ); + const closestDropzoneEl = + closest(validDropzoneEls, viewPortCenterPoint) || + dropzoneEls.at(-1); + // Insert the selected snippet. closestDropzoneEl.after(snippetEl); this.shared.dropzone.removeDropzones(); From fc4317154f98ea194ebadc4fff9f8cb71e34084a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Fri, 9 May 2025 17:16:05 +0200 Subject: [PATCH 170/240] Fix missing preserveSelection when toggling grid mode on drag --- .../static/src/core/grid_layout/grid_layout_plugin.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js b/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js index 6be39000473c9..51b49fb47d23d 100644 --- a/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js +++ b/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js @@ -26,7 +26,7 @@ function isGridItem(el) { export class GridLayoutPlugin extends Plugin { static id = "gridLayout"; - static dependencies = ["history"]; + static dependencies = ["history", "selection"]; resources = { get_overlay_buttons: withSequence(0, { getButtons: this.getActiveOverlayButtons.bind(this), @@ -214,7 +214,8 @@ export class GridLayoutPlugin extends Plugin { if (allowGridMode) { // Toggle the grid mode if it is not already on. if (!isRowInGridMode) { - toggleGridMode(containerEl); + const preserveSelection = this.dependencies.selection.preserveSelection; + toggleGridMode(containerEl, preserveSelection); } const gridItemProps = getGridItemProperties(columnEl); From 8ebbd4768ac5427f8228e825346724abe6270333 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Mon, 12 May 2025 11:54:10 +0200 Subject: [PATCH 171/240] Use resources when dragging a snippet instead of overrides + clean code --- .../static/src/sidebar/block_tab.js | 70 ++++++++++++------- addons/html_editor/static/src/editor.js | 19 +++++ 2 files changed, 63 insertions(+), 26 deletions(-) diff --git a/addons/html_builder/static/src/sidebar/block_tab.js b/addons/html_builder/static/src/sidebar/block_tab.js index f994dbdc04e0b..c0f1fd7cbee33 100644 --- a/addons/html_builder/static/src/sidebar/block_tab.js +++ b/addons/html_builder/static/src/sidebar/block_tab.js @@ -45,10 +45,12 @@ export class BlockTab extends Component { return this.env.editor.shared; } - get resources() { - return this.env.editor.resources; - } - + /** + * Opens and manages the snippet dialog after clicking on a snippet group, + * and inserts the selected snippet in the page. + * + * @param {Object} snippet the clicked snippet group + */ onSnippetGroupClick(snippet) { this.shared.operation.next( async () => { @@ -104,7 +106,7 @@ export class BlockTab extends Component { } /** - * Opens and manages the snippet dialog after dropping a snippet group + * Opens and manages the snippet dialog after dropping a snippet group. * If a snippet is selected in the dialog, it will replace the given * placeholder snippet. * @@ -151,6 +153,11 @@ export class BlockTab extends Component { delete this.cancelDragAndDrop; } + /** + * Shows a tooltip telling to drag the snippet when clicking on it. + * + * @param {Event} ev + */ showSnippetTooltip(ev) { const snippetEl = ev.currentTarget.closest(".o_snippet.o_draggable"); if (snippetEl) { @@ -164,6 +171,9 @@ export class BlockTab extends Component { // TODO bounce animation on click if empty editable + /** + * Initializes the drag and drop for the snippets in the block tabs. + */ makeSnippetDraggable() { let dropzoneEls = []; let dragAndDropResolve; @@ -205,19 +215,21 @@ export class BlockTab extends Component { return draggedEl; }, onDragStart: ({ element }) => { - this.cancelDragAndDrop = this.shared.history.makeSavePoint(); - this.hideSnippetToolTip?.(); - this.shared.operation.next( async () => { await new Promise((resolve) => (dragAndDropResolve = () => resolve())); }, { withLoadingEffect: false } ); + this.cancelDragAndDrop = this.shared.history.makeSavePoint(); + this.hideSnippetToolTip?.(); this.document.body.classList.add("oe_dropzone_active"); this.state.ongoingInsertion = true; + this.dragState = {}; + dropzoneEls = []; + const category = element.closest(".o_snippets_container").id; const id = element.dataset.id; snippet = this.snippetModel.getSnippet(category, id); @@ -259,7 +271,11 @@ export class BlockTab extends Component { dropzoneEls = this.shared.dropzone.activateDropzones(selectors, { toInsertInline: isInlineSnippet, }); - this.onDropzoneStart(); + + this.env.editor.dispatchTo("on_snippet_dragged_handlers", { + snippetEl, + dragState: this.dragState, + }); }, dropzoneOver: ({ dropzone }) => { const dropzoneEl = dropzone.el; @@ -269,14 +285,20 @@ export class BlockTab extends Component { } dropzoneEl.after(snippetEl); dropzoneEl.classList.add("invisible"); - this.onDropZoneOver(); + this.dragState.currentDropzoneEl = dropzoneEl; + + this.env.editor.dispatchTo("on_snippet_over_dropzone_handlers", { + snippetEl, + dragState: this.dragState, + }); // Preview the snippet correctly. // Note: no async previews, in order to not slow down the drag. this.cancelSnippetPreview = this.shared.history.makeSavePoint(); - this.resources["on_snippet_preview_handlers"]?.forEach((onSnippetPreview) => - onSnippetPreview({ snippetEl }) - ); + this.env.editor.dispatchTo("on_snippet_preview_handlers", { + snippetEl, + dragState: this.dragState, + }); }, dropzoneOut: ({ dropzone }) => { const dropzoneEl = dropzone.el; @@ -288,9 +310,14 @@ export class BlockTab extends Component { this.cancelSnippetPreview(); delete this.cancelSnippetPreview; + this.env.editor.dispatchTo("on_snippet_out_dropzone_handlers", { + snippetEl, + dragState: this.dragState, + }); + snippetEl.remove(); dropzoneEl.classList.remove("invisible"); - this.onDropZoneOut(); + this.dragState.currentDropzoneEl = null; }, onDragEnd: async ({ x, y, helper, dropzone }) => { // Undo the preview if any. @@ -331,7 +358,6 @@ export class BlockTab extends Component { } this.state.ongoingInsertion = false; - this.onDropZoneStop(); // TODO check if it is the best place. delete this.cancelSnippetPreview; if (!isSnippetGroup) { delete this.cancelDragAndDrop; @@ -351,8 +377,8 @@ export class BlockTab extends Component { this.updateDroppedSnippet(snippetEl); await scrollTo(snippetEl, { extraOffset: 50 }); // Build the snippet. - for (const onSnippetDropped of this.resources["on_snippet_dropped_handlers"] || []) { - const cancel = await onSnippetDropped({ snippetEl }); + for (const onSnippetDropped of this.env.editor.getResource("on_snippet_dropped_handlers")) { + const cancel = await onSnippetDropped({ snippetEl, dragState: this.dragState }); // Cancel everything if the resource asked to. if (cancel) { this.cancelDragAndDrop?.(); @@ -361,7 +387,7 @@ export class BlockTab extends Component { } this.env.editor.config.updateInvisibleElementsPanel(); this.shared.disableSnippets.disableUndroppableSnippets(); - this.env.editor.shared.history.addStep(); + this.shared.history.addStep(); } /** @@ -379,12 +405,4 @@ export class BlockTab extends Component { delete snippetEl.dataset.name; } } - - /** - * Hooks allowing other modules to react to drop zones being enabled. - */ - onDropzoneStart() {} - onDropZoneOver() {} - onDropZoneOut() {} - onDropZoneStop() {} } diff --git a/addons/html_editor/static/src/editor.js b/addons/html_editor/static/src/editor.js index a3ab8551d32c6..9680134fdb229 100644 --- a/addons/html_editor/static/src/editor.js +++ b/addons/html_editor/static/src/editor.js @@ -206,6 +206,25 @@ export class Editor { return Object.freeze(resources); } + /** + * @param {string} resourceId + * @returns {Array} + */ + getResource(resourceId) { + return this.resources[resourceId] || []; + } + + /** + * Executes the functions registered under resourceId with the given + * arguments. + * + * @param {string} resourceId + * @param {...any} args The arguments to pass to the handlers + */ + dispatchTo(resourceId, ...args) { + this.getResource(resourceId).forEach((handler) => handler(...args)); + } + getContent() { return this.getElContent().innerHTML; } From 7a4d0bfbcf1d54b242db8f063683c67c7f7e163b Mon Sep 17 00:00:00 2001 From: Rodolpho Lima Date: Fri, 11 Apr 2025 10:37:52 +0200 Subject: [PATCH 172/240] Handle system and unobserved classes - split classList mutations into individual records (one per class) - handle system classes mutations (completely ignore them) --- .../custom_tab/container_buttons.test.js | 2 +- .../top_menu_visibility_option.test.js | 2 +- .../static/tests/overlay_buttons.test.js | 2 +- .../static/src/core/history_plugin.js | 270 ++++++++++++------ addons/html_editor/static/src/utils/dom.js | 16 +- .../html_editor/static/tests/history.test.js | 72 +++-- 6 files changed, 251 insertions(+), 113 deletions(-) diff --git a/addons/html_builder/static/tests/custom_tab/container_buttons.test.js b/addons/html_builder/static/tests/custom_tab/container_buttons.test.js index 0004b61b75788..80bb1ef010b3d 100644 --- a/addons/html_builder/static/tests/custom_tab/container_buttons.test.js +++ b/addons/html_builder/static/tests/custom_tab/container_buttons.test.js @@ -332,7 +332,7 @@ test("applying option container button should wait for actions in progress", asy undo(editor); expect(editable).toHaveInnerHTML( - `
plop
` + `
plop
` ); undo(editor); diff --git a/addons/html_builder/static/tests/options/top_menu_visibility_option.test.js b/addons/html_builder/static/tests/options/top_menu_visibility_option.test.js index 86f7c9a0b61a5..0a1c08ab7f46a 100644 --- a/addons/html_builder/static/tests/options/top_menu_visibility_option.test.js +++ b/addons/html_builder/static/tests/options/top_menu_visibility_option.test.js @@ -83,7 +83,7 @@ test("undo hidden and come back to regular", async () => { openEditor: true, beforeWrapwrapContent: ``, headerContent: ` -
+
Menu Content
`, }); diff --git a/addons/html_builder/static/tests/overlay_buttons.test.js b/addons/html_builder/static/tests/overlay_buttons.test.js index 9fd4be3633505..37f711762266d 100644 --- a/addons/html_builder/static/tests/overlay_buttons.test.js +++ b/addons/html_builder/static/tests/overlay_buttons.test.js @@ -292,7 +292,7 @@ test("Applying an overlay button action should wait for the actions in progress" undo(editor); expect(editable).toHaveInnerHTML( - `
plop
` + `
plop
` ); undo(editor); diff --git a/addons/html_editor/static/src/core/history_plugin.js b/addons/html_editor/static/src/core/history_plugin.js index 050462a13b078..6c5ebc40440f3 100644 --- a/addons/html_editor/static/src/core/history_plugin.js +++ b/addons/html_editor/static/src/core/history_plugin.js @@ -4,6 +4,7 @@ import { childNodes, descendants, getCommonAncestor } from "../utils/dom_travers import { hasTouch } from "@web/core/browser/feature_detection"; import { withSequence } from "@html_editor/utils/resource"; import { Deferred } from "@web/core/utils/concurrency"; +import { toggleClass } from "@html_editor/utils/dom"; /** * @typedef { import("./selection_plugin").EditorSelection } EditorSelection @@ -47,6 +48,13 @@ import { Deferred } from "@web/core/utils/concurrency"; * // todo change oldValue to attributeOldValue * @property { string } oldValue * + * @typedef { Object } HistoryMutationClassList + * @property { "classList" } type + * @property { string } id + * @property { string } className + * @property { boolean } value + * @property { boolean } oldValue + * * @typedef { Object } HistoryMutationAdd * @property { "add" } type * // todo change id to nodeId @@ -73,7 +81,22 @@ import { Deferred } from "@web/core/utils/concurrency"; * // todo change previousId to previousNodeId * @property { string } previousId * - * @typedef { HistoryMutationCharacterData | HistoryMutationAttributes | HistoryMutationAdd | HistoryMutationRemove } HistoryMutation + * @typedef { HistoryMutationCharacterData | HistoryMutationAttributes | HistoryMutationClassList | HistoryMutationAdd | HistoryMutationRemove } HistoryMutation + * + * @typedef {Object} MutationRecordClassList + * @property { "classList" } type + * @property { Node } target + * @property { string } className + * @property { boolean } value + * + * @typedef {Object} MutationRecordAttributes + * @property { "attributes" } type + * @property { Node } target + * @property { string } attributeName + * @property { string } oldValue + * @property { string } newValue + * + * @typedef { MutationRecord | MutationRecordClassList | MutationRecordAttributes } HistoryMutationRecord * * @typedef { Object } PreviewableOperation * @property { Function } apply @@ -337,18 +360,27 @@ export class HistoryPlugin extends Plugin { } /** - * @param { MutationRecord[] } records - * @returns { MutationRecord[] } processed records + * @param { MutationRecord[] } mutationRecords + * @returns { HistoryMutationRecord[] } */ - processNewRecords(records) { - records = this.filterMutationRecords(records); - if (!records.length) { - return []; - } + processNewRecords(mutationRecords) { + mutationRecords = this.filterMutationRecords(mutationRecords); + /** @type {HistoryMutationRecord[]} */ + const records = mutationRecords + .flatMap((record) => this.transformRecord(record)) + .filter((record) => !this.isSystemClassOrAttributeRecord(record)) + .filter((record) => !this.isNoOpRecord(record)); this.stageRecords(records); return records; } + /** + * @param {HistoryMutationRecord} param0 + */ + isNoOpRecord({ type, oldValue, newValue }) { + return type === "attributes" && oldValue === newValue; + } + dispatchContentUpdated() { if (!this.currentStep?.mutations?.length) { return; @@ -404,77 +436,137 @@ export class HistoryPlugin extends Plugin { } /** * @param { MutationRecord[] } records + * @returns { MutationRecord[] } */ filterMutationRecords(records) { this.dispatchTo("before_filter_mutation_record_handlers", records); for (const callback of this.getResource("savable_mutation_record_predicates")) { records = records.filter(callback); } + records = this.filterAttributeMutationRecords(records); + // @todo: this removes mutation records that change the node reference. + // Fix this! + records = records.filter((record) => !this.isSameTextContentMutation(record)); + records = this.filterOutIntermediateStateMutationRecords(records); + return records; + } - // Save the first attribute in a cache to compare only the first - // attribute record of node to its latest state. - const attributeCache = new Map(); - const filteredRecords = []; + /** + * @param { MutationRecord[] } records + */ + filterAttributeMutationRecords(records) { + return records.filter((record) => { + if (record.type !== "attributes") { + return true; + } + // Skip the attributes change on the dom. + if (record.target === this.editable) { + return false; + } + if (record.attributeName === "contenteditable") { + return false; + } + return true; + }); + } + /** + * @todo: handle characterData mutations + * + * @param { MutationRecord[] } records + */ + filterOutIntermediateStateMutationRecords(records) { + /** @type {Map>} */ + const nodeToAttributes = new Map(); + const filteredRecords = []; for (const record of records) { - if (record.type === "attributes") { - // Skip the attributes change on the dom. - if (record.target === this.editable) { - continue; - } - if (record.attributeName === "contenteditable") { - continue; - } - if (this.mutationFilteredAttributes.has(record.attributeName)) { - continue; - } - // @todo @phoenix test attributeCache - attributeCache.set(record.target, attributeCache.get(record.target) || {}); - // @todo @phoenix add test for mutationFilteredClasses. - if (record.attributeName === "class") { - const classBefore = (record.oldValue && record.oldValue.split(" ")) || []; - const classAfter = - (record.target.className && - record.target.className.split && - record.target.className.split(" ")) || - []; - const excludedClasses = []; - for (const klass of classBefore) { - if (!classAfter.includes(klass)) { - excludedClasses.push(klass); - } - } - for (const klass of classAfter) { - if (!classBefore.includes(klass)) { - excludedClasses.push(klass); - } - } - if ( - excludedClasses.length && - excludedClasses.every((c) => this.mutationFilteredClasses.has(c)) - ) { - continue; - } - } - if ( - typeof attributeCache.get(record.target)[record.attributeName] === "undefined" - ) { - const oldValue = record.oldValue === undefined ? null : record.oldValue; - attributeCache.get(record.target)[record.attributeName] = - oldValue !== record.target.getAttribute(record.attributeName); - } - if (!attributeCache.get(record.target)[record.attributeName]) { - continue; - } - } else if (record.type === "childList" && this.isSameTextContentMutation(record)) { + if (record.type !== "attributes") { + filteredRecords.push(record); continue; } - filteredRecords.push(record); + // Add entry for current target if not already present. + if (!nodeToAttributes.has(record.target)) { + nodeToAttributes.set(record.target, new Set()); + } + const visitedAttributes = nodeToAttributes.get(record.target); + // Keep only the first mutation record for each attribute. + if (!visitedAttributes.has(record.attributeName)) { + filteredRecords.push(record); + visitedAttributes.add(record.attributeName); + } } - // @todo @phoenix allow an option to filter mutation records. return filteredRecords; } + /** + * Class attribute records are expanded into multiple classList records. + * Attribute records have their oldValue normalized and newValue added to it. + * @todo: expand childList mutations to add/remove records. + * + * @param { MutationRecord } record + * @returns { HistoryMutationRecord | HistoryMutationRecord[] } + */ + transformRecord(record) { + if (record.type === "attributes") { + if (record.attributeName === "class") { + return this.splitClassMutationRecord(record); + } + const oldValue = record.oldValue === undefined ? null : record.oldValue; + const newValue = record.target.getAttribute(record.attributeName); + const { type, target, attributeName } = record; + return { type, target, attributeName, oldValue, newValue }; + } + return record; + } + + /** + * Breaks down a class attribute mutation into individual class + * addition/removal records for more precise history tracking. + * + * @param { MutationRecord } record of type "attributes" with attributeName === "class" + * @returns { MutationRecordClassList[]} + */ + splitClassMutationRecord(record) { + // oldValue can be nullish, or have extra spaces + const oldValue = record.oldValue?.split(" ").filter(Boolean); + const classesBefore = new Set(oldValue); + const classesAfter = new Set(record.target.classList); + // @todo: use Set.prototype.difference when it becomes widely available + const setDifference = (setA, setB) => { + const diff = new Set(setA); + setB.forEach((item) => diff.delete(item)); + return diff; + }; + const addedClasses = setDifference(classesAfter, classesBefore); + const removedClasses = setDifference(classesBefore, classesAfter); + + /** @type {(className: string, operation: string) => MutationRecordClassList } */ + const createClassRecord = (className, isAdded) => ({ + type: "classList", + target: record.target, + className, + value: isAdded, + }); + // Generate records for each class change + return [ + ...[...addedClasses].map((cls) => createClassRecord(cls, true)), + ...[...removedClasses].map((cls) => createClassRecord(cls, false)), + ]; + } + + /** + * @param { HistoryMutationRecord } record + */ + isSystemClassOrAttributeRecord(record) { + if (record.type === "attributes") { + return this.mutationFilteredAttributes.has(record.attributeName); + } + if (record.type === "classList") { + return this.mutationFilteredClasses.has(record.className); + } + return false; + } + /** * Check if a mutation consists of removing and adding a single text node * with the same text content, which occurs in Firefox but is optimized @@ -517,7 +609,7 @@ export class HistoryPlugin extends Plugin { this.currentStep.selection = this.serializeSelection(selection); } /** - * @param { MutationRecord[] } records + * @param { HistoryMutationRecord[] } records */ stageRecords(records) { this.setIdOnRecords(records); @@ -551,19 +643,29 @@ export class HistoryPlugin extends Plugin { }); break; } + case "classList": { + this.currentStep.mutations.push({ + type: "classList", + id: this.nodeToIdMap.get(record.target), + className: record.className, + oldValue: !record.value, + value: record.value, + }); + break; + } case "attributes": { this.currentStep.mutations.push({ type: "attributes", id: this.nodeToIdMap.get(record.target), attributeName: record.attributeName, - value: record.target.getAttribute(record.attributeName), oldValue: record.oldValue, + value: record.newValue, }); this.dispatchTo("attribute_change_handlers", { target: record.target, attributeName: record.attributeName, oldValue: record.oldValue, - value: record.target.getAttribute(record.attributeName), + value: record.newValue, }); break; } @@ -922,10 +1024,17 @@ export class HistoryPlugin extends Plugin { } break; } + case "classList": { + const node = this.idToNodeMap.get(mutation.id); + if (node) { + toggleClass(node, mutation.className, mutation.value); + } + break; + } case "attributes": { const node = this.idToNodeMap.get(mutation.id); if (node) { - let value = this.getAttributeValue(mutation.attributeName, mutation.value); + let value = mutation.value; for (const cb of this.getResource("attribute_change_processors")) { value = cb( { @@ -991,13 +1100,17 @@ export class HistoryPlugin extends Plugin { } break; } + case "classList": { + const node = this.idToNodeMap.get(mutation.id); + if (node) { + toggleClass(node, mutation.className, mutation.oldValue); + } + break; + } case "attributes": { const node = this.idToNodeMap.get(mutation.id); if (node) { - let value = this.getAttributeValue( - mutation.attributeName, - mutation.oldValue - ); + let value = mutation.oldValue; for (const cb of this.getResource("attribute_change_processors")) { value = cb( { @@ -1234,19 +1347,6 @@ export class HistoryPlugin extends Plugin { ); } - /** - * @param { string } attributeName - * @param { string } value - */ - getAttributeValue(attributeName, value) { - if (typeof value === "string" && attributeName === "class") { - value = value - .split(" ") - .filter((c) => !this.mutationFilteredClasses.has(c)) - .join(" "); - } - return value; - } /** * @param { Node } node * @param { string } attributeName diff --git a/addons/html_editor/static/src/utils/dom.js b/addons/html_editor/static/src/utils/dom.js index 38ceaa9939751..75d794e5a8903 100644 --- a/addons/html_editor/static/src/utils/dom.js +++ b/addons/html_editor/static/src/utils/dom.js @@ -218,10 +218,18 @@ export function cleanTrailingBR(el, predicates = []) { } } -export function toggleClass(node, className) { - node.classList.toggle(className); - if (!node.className) { - node.removeAttribute("class"); +/** + * Wrapper for classList.toggle that removes the class attribute if the + * element has no class name after the toggle. + * + * @param {Element} element + * @param {string} className + * @param {boolean} [force] + */ +export function toggleClass(element, className, force) { + element.classList.toggle(className, force); + if (!element.className) { + element.removeAttribute("class"); } } diff --git a/addons/html_editor/static/tests/history.test.js b/addons/html_editor/static/tests/history.test.js index ce656a1752d3b..fb39f54e33531 100644 --- a/addons/html_editor/static/tests/history.test.js +++ b/addons/html_editor/static/tests/history.test.js @@ -251,11 +251,12 @@ describe("step", () => { }); }); -describe("prevent system classes to be set from history", () => { +describe("system classes and attributes", () => { class TestSystemClassesPlugin extends Plugin { static id = "testRenderClasses"; resources = { system_classes: ["x"], + system_attributes: ["data-x"], }; } const Plugins = [...MAIN_PLUGINS, TestSystemClassesPlugin]; @@ -273,38 +274,44 @@ describe("prevent system classes to be set from history", () => { }); }); - test("should prevent system classes to be added when adding 2 classes", async () => { + test("system classes are ignored by history (neither added or removed)", async () => { + const { editor, el } = await setupEditor(`

a[]

`, { config: { Plugins: Plugins } }); + const p = editor.editable.querySelector("p"); + p.className = "x y"; + addStep(editor); + undo(editor); + expect(getContent(el)).toBe(`

a[]

`); + redo(editor); + expect(getContent(el)).toBe(`

a[]

`); + }); + + test("system class with char mutation", async () => { await testEditor({ contentBefore: `

a[]

`, stepFunction: async (editor) => { const p = editor.editable.querySelector("p"); - p.className = "x y"; + p.className = "x"; + p.textContent = "b"; + editor.shared.selection.setCursorEnd(p); addStep(editor); undo(editor); redo(editor); }, - contentAfter: `

a[]

`, + contentAfter: `

b[]

`, config: { Plugins: Plugins }, }); }); - test("should prevent system classes to be added in historyApply", async () => { - const { el, plugins } = await setupEditor(`

a

`, { config: { Plugins } }); - /** @type import("../src/core/history_plugin").HistoryPlugin") */ - const historyPlugin = plugins.get("history"); - const p = el.querySelector("p"); - - historyPlugin.applyMutations([ - { - attributeName: "class", - id: historyPlugin.nodeToIdMap.get(p), - oldValue: null, - type: "attributes", - value: "x y", - }, - ]); - - expect(getContent(el)).toBe(`

a

`); + test("system attributes mutations are ignored by history", async () => { + const { editor, el } = await setupEditor(`

a[]

`, { config: { Plugins: Plugins } }); + const p = editor.editable.querySelector("p"); + p.setAttribute("data-x", "1"); + p.setAttribute("data-y", "1"); + addStep(editor); + undo(editor); + expect(getContent(el)).toBe(`

a[]

`); + redo(editor); + expect(getContent(el)).toBe(`

a[]

`); }); test("should skip the mutations if no changes in state", async () => { @@ -696,3 +703,26 @@ describe("custom mutation", () => { expect.verifySteps(["custom apply", "custom revert", "custom apply", "custom revert"]); }); }); + +describe("unobserved mutations", () => { + const withAddStep = (editor, callback) => { + callback(); + editor.shared.history.addStep(); + }; + + describe("classes", () => { + test("unobserved class mutations should not be affected by undo/redo", async () => { + const { editor } = await setupEditor(`

test

`); + /** @type {HTMLElement} */ + const p = editor.editable.querySelector("p"); + withAddStep(editor, () => p.classList.add("a")); + editor.shared.history.ignoreDOMMutations(() => p.classList.add("b")); + withAddStep(editor, () => p.classList.add("c")); + editor.shared.history.undo(); + expect(p.className).toBe("a b"); + editor.shared.history.ignoreDOMMutations(() => p.classList.remove("b")); + editor.shared.history.redo(); + expect(p.className).toBe("a c"); + }); + }); +}); From 78ac1cf03d07c9b4258e64e9a3ee91e0b3a075e3 Mon Sep 17 00:00:00 2001 From: panv-odoo Date: Mon, 28 Apr 2025 12:50:20 +0530 Subject: [PATCH 173/240] [IMP] website: Adapt and enable snippet_carousel tours --- .../tests/tours/carousel_content_removal.js | 16 ++++++++-------- addons/website/tests/test_ui.py | 1 - 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/addons/website/static/tests/tours/carousel_content_removal.js b/addons/website/static/tests/tours/carousel_content_removal.js index 5c4667b0d436b..04b7ebe29e203 100644 --- a/addons/website/static/tests/tours/carousel_content_removal.js +++ b/addons/website/static/tests/tours/carousel_content_removal.js @@ -75,13 +75,13 @@ registerWebsitePreviewTour( ...insertSnippet({ id: "s_carousel", name: "Carousel", groupName: "Intro" }), ...clickOnSnippet(".carousel .carousel-item.active"), // Slide to the right. - changeOption("CarouselItem", 'we-button[data-switch-to-slide="right"]'), + changeOption("Slide (1/3)", "[aria-label='Move Forward']"), checkSlides(3, 2), // Add a slide (with the "CarouselItem" option). - changeOption("CarouselItem", "we-button[data-add-slide-item]"), + changeOption("Slide (2/3)", "button[aria-label='Add Slide']"), checkSlides(4, 3), // Remove a slide. - changeOption("CarouselItem", "we-button[data-remove-slide]"), + changeOption("Slide (3/4)", "button[aria-label='Remove Slide']"), checkSlides(3, 2), { trigger: ":iframe .carousel .carousel-control-prev", @@ -90,20 +90,20 @@ registerWebsitePreviewTour( }, checkSlides(3, 1), // Add a slide (with the "Carousel" option). - changeOption("Carousel", "we-button[data-add-slide]"), + changeOption("Carousel", "[data-action-id='addSlide']"), checkSlides(4, 2), { content: "Check if the slide indicator was correctly updated", - trigger: "we-customizeblock-options span:contains(' (2/4)')", + trigger: ".options-container span:contains(' (2/4)')", }, // Check if we can still remove a slide. - changeOption("CarouselItem", "we-button[data-remove-slide]"), + changeOption("Slide (2/4)", "button[aria-label='Remove Slide']"), checkSlides(3, 1), // Slide to the left. - changeOption("CarouselItem", 'we-button[data-switch-to-slide="left"]'), + changeOption("Slide (1/3)", "[aria-label='Move Backward']"), checkSlides(3, 3), // Reorder the slides and make it the second one. - changeOption("GalleryElement", 'we-button[data-position="prev"]'), + changeOption("Slide (3/3)", "[data-action-value='prev']"), checkSlides(3, 2), ...clickOnSave(), // Check that saving always sets the first slide as active. diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index 56d904921cb49..a05ffeb6bc95c 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -766,7 +766,6 @@ def test_website_edit_menus_delete_parent(self): self.env['website.menu'].save(website.id, {'data': [parent_menu, child_menu]}) self.start_tour(self.env['website'].get_client_action_url('/'), 'edit_menus_delete_parent', login='admin') - @unittest.skip def test_snippet_carousel(self): self.start_tour('/', 'snippet_carousel', login='admin') From e400b70fb02d383fec8a18ddf194397d10702e6f Mon Sep 17 00:00:00 2001 From: Rahil Ghanchi Date: Wed, 16 Apr 2025 11:40:32 +0530 Subject: [PATCH 174/240] [IMP] website: test_html_editor_scss, test_html_editor_scss_2 no change --- addons/website/tests/test_ui.py | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index a05ffeb6bc95c..186f2e8db2742 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -150,7 +150,6 @@ def test_html_editor_multiple_templates(self): self.assertTrue(specific_page.arch != oe_structure_layout, "Specific homepage view should have been changed") self.assertEqual(len(specific_page.inherit_children_ids.filtered(lambda v: 'oe_structure' in v.name)), 1, "oe_structure view should have been created on the specific tree") - @unittest.skip def test_html_editor_scss(self): self.user_demo.write({ 'group_ids': [(6, 0, [ From 39566e2634ac0da11a9bceee6c9402d0c5eea96f Mon Sep 17 00:00:00 2001 From: Rahil Ghanchi Date: Wed, 16 Apr 2025 12:21:08 +0530 Subject: [PATCH 175/240] [IMP] website: adapt website_code_editor_usable --- addons/website/tests/test_ui.py | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index 186f2e8db2742..2d6b4823830e2 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -185,7 +185,6 @@ def mock_media_library_search(self, **params): self.start_tour("/", 'website_media_dialog_undraw', login='admin') - @unittest.skip def test_code_editor_usable(self): # TODO: enable debug mode when failing tests have been fixed (props validation) url = '/odoo/action-website.website_preview' From 99b7bd93fab1a9292bee2b97fea85a8e65e30035 Mon Sep 17 00:00:00 2001 From: Rahil Ghanchi Date: Thu, 1 May 2025 12:31:24 +0530 Subject: [PATCH 176/240] [IMP] website_sale: adapt tours of website_sale compare_list_price_price_list_display website_sale.snippet_products website_sale.products_snippet_recently_viewed --- .../static/tests/tours/website_sale_snippet_products.js | 7 +++---- .../tests/test_website_sale_show_compare_list_price.py | 2 -- addons/website_sale/tests/test_website_sale_snippets.py | 4 ---- 3 files changed, 3 insertions(+), 10 deletions(-) diff --git a/addons/website_sale/static/tests/tours/website_sale_snippet_products.js b/addons/website_sale/static/tests/tours/website_sale_snippet_products.js index 0898365cc3079..ae7b429c79991 100644 --- a/addons/website_sale/static/tests/tours/website_sale_snippet_products.js +++ b/addons/website_sale/static/tests/tours/website_sale_snippet_products.js @@ -2,6 +2,7 @@ import { queryFirst } from '@odoo/hoot-dom'; import { changeOption, + changeOptionInPopover, clickOnSave, clickOnSnippet, insertSnippet, @@ -29,8 +30,7 @@ const templates = [ function changeTemplate(templateKey) { const templateClass = templateKey.replace(/dynamic_filter_template_/, "s_"); return [ - changeOption(optionBlock, 'we-select[data-name="template_opt"] we-toggler', 'template'), - changeOption(optionBlock, `we-button[data-select-data-attribute="website_sale.${templateKey}"]`), + ...changeOptionInPopover("Products", "Template", `div[data-action-param*="${templateKey}"]`), { content: 'Check the template is applied', trigger: `:iframe .s_dynamic_snippet_products.${templateClass} .carousel`, @@ -69,8 +69,7 @@ registerWebsitePreviewTour('website_sale.products_snippet_recently_viewed', { ...insertSnippet(productsSnippet), ...clickOnSnippet(productsSnippet), ...changeTemplate('dynamic_filter_template_product_product_add_to_cart'), - changeOption(optionBlock, 'we-select[data-name="filter_opt"] we-toggler', 'filter'), - changeOption(optionBlock, 'we-select[data-name="filter_opt"] we-button:contains("Recently Viewed")', 'filter'), + ...changeOptionInPopover("Products", "Filter", "Recently Viewed"), ...clickOnSave(), { content: 'make delete icon appear', diff --git a/addons/website_sale/tests/test_website_sale_show_compare_list_price.py b/addons/website_sale/tests/test_website_sale_show_compare_list_price.py index a2e404dd6285f..10a53fa5823ce 100644 --- a/addons/website_sale/tests/test_website_sale_show_compare_list_price.py +++ b/addons/website_sale/tests/test_website_sale_show_compare_list_price.py @@ -103,8 +103,6 @@ def setUpClass(cls): ] }) - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_compare_list_price_price_list_display(self): self.env['res.config.settings'].create({'group_product_price_comparison': True}).execute() self.start_tour("/", 'compare_list_price_price_list_display', login=self.env.user.login) diff --git a/addons/website_sale/tests/test_website_sale_snippets.py b/addons/website_sale/tests/test_website_sale_snippets.py index 5dc2cb7a7c128..71c8e20f6dce1 100644 --- a/addons/website_sale/tests/test_website_sale_snippets.py +++ b/addons/website_sale/tests/test_website_sale_snippets.py @@ -14,8 +14,6 @@ @tagged('post_install', '-at_install', 'website_snippets') class TestSnippets(HttpCase): - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_01_snippet_products_edition(self): self.env['product.product'].create({ 'name': 'Test Product', @@ -43,8 +41,6 @@ def test_01_snippet_products_edition(self): }) self.start_tour('/', 'website_sale.snippet_products', login='admin') - # TODO master-mysterious-egg fix error - @unittest.skip("prepare mysterious-egg for merging") def test_02_snippet_products_remove(self): Visitor = self.env['website.visitor'] user = self.env['res.users'].search([('login', '=', 'admin')]) From efd2e98799220b024fe08493096ad59c5223af4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Wed, 14 May 2025 11:21:59 +0200 Subject: [PATCH 177/240] test --- .../src/website_preview/website_preview.scss | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 addons/html_builder/static/src/website_preview/website_preview.scss diff --git a/addons/html_builder/static/src/website_preview/website_preview.scss b/addons/html_builder/static/src/website_preview/website_preview.scss deleted file mode 100644 index bf925b9f8dd5d..0000000000000 --- a/addons/html_builder/static/src/website_preview/website_preview.scss +++ /dev/null @@ -1,19 +0,0 @@ -// Parallax -.parallax { - // TODO this introduces a limitation: no dropdown will be able to - // overflow. Maybe there is a better way to find. - &:not(.s_parallax_no_overflow_hidden) { - overflow: hidden; - } - - > .s_parallax_bg { - @extend %o-we-background-layer; - } - &.s_parallax_is_fixed > .s_parallax_bg { - background-attachment: fixed; - } -} -// Keeps parallax snippet element selectable when Height = auto. -.s_parallax { - min-height: 10px; -} From ed93e8cbd1f47b11aaa5f73633bcc4cc9f39956e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Wed, 14 May 2025 10:34:21 +0200 Subject: [PATCH 178/240] move html builder interactions back to website --- addons/html_builder/__manifest__.py | 4 ---- .../static/src/interactions/carousel.edit.js | 2 +- .../static/src/interactions/image_gallery.edit.js | 4 ++-- .../static/src/interactions/image_gallery.edit.xml | 2 +- .../static/src/interactions/social_media.edit.js | 4 ++-- .../static/src/interactions/social_media.edit.xml | 2 +- .../carousel/carousel_section_slider.edit.test.js | 2 +- .../tests/interactions/carousel/carousel_slider.edit.test.js | 2 +- 8 files changed, 9 insertions(+), 13 deletions(-) rename addons/{html_builder => website}/static/src/interactions/carousel.edit.js (97%) rename addons/{html_builder => website}/static/src/interactions/image_gallery.edit.js (76%) rename addons/{html_builder => website}/static/src/interactions/image_gallery.edit.xml (86%) rename addons/{html_builder => website}/static/src/interactions/social_media.edit.js (60%) rename addons/{html_builder => website}/static/src/interactions/social_media.edit.xml (84%) diff --git a/addons/html_builder/__manifest__.py b/addons/html_builder/__manifest__.py index 935aeb9eb85c0..284b828041f2b 100644 --- a/addons/html_builder/__manifest__.py +++ b/addons/html_builder/__manifest__.py @@ -43,7 +43,6 @@ 'html_builder/static/src/**/*', ('remove', 'html_builder/static/src/website_preview/**/*'), - ('remove', 'html_builder/static/src/interactions/**/*'), ], 'html_builder.inside_builder_style': [ ('include', 'web._assets_helpers'), @@ -53,7 +52,6 @@ ], 'html_builder.assets_edit_frontend': [ ('include', 'website.assets_edit_frontend'), - 'html_builder/static/src/interactions/**/*.edit.*', ], 'html_builder.iframe_add_dialog': [ ('include', 'web.assets_frontend'), @@ -65,9 +63,7 @@ ('include', 'html_builder.assets'), ], 'web.assets_frontend': [ - 'html_builder/static/src/interactions/**/*', 'html_builder/static/src/website_preview/website_builder_action.editor.scss', - ('remove', 'html_builder/static/src/interactions/**/*.edit.*'), ], }, 'license': 'LGPL-3', diff --git a/addons/html_builder/static/src/interactions/carousel.edit.js b/addons/website/static/src/interactions/carousel.edit.js similarity index 97% rename from addons/html_builder/static/src/interactions/carousel.edit.js rename to addons/website/static/src/interactions/carousel.edit.js index 1bba482914652..c34ee939e9307 100644 --- a/addons/html_builder/static/src/interactions/carousel.edit.js +++ b/addons/website/static/src/interactions/carousel.edit.js @@ -79,6 +79,6 @@ export class CarouselEdit extends Interaction { } } -registry.category("public.interactions.edit").add("html_builder.carousel_edit", { +registry.category("public.interactions.edit").add("website.carousel_edit", { Interaction: CarouselEdit, }); diff --git a/addons/html_builder/static/src/interactions/image_gallery.edit.js b/addons/website/static/src/interactions/image_gallery.edit.js similarity index 76% rename from addons/html_builder/static/src/interactions/image_gallery.edit.js rename to addons/website/static/src/interactions/image_gallery.edit.js index 8aa98ed5b9875..5d521b74939dd 100644 --- a/addons/html_builder/static/src/interactions/image_gallery.edit.js +++ b/addons/website/static/src/interactions/image_gallery.edit.js @@ -9,7 +9,7 @@ export class ImageGalleryEdit extends Interaction { }, }; setup() { - this.renderAt("html_builder.empty_image_gallery_alert", {}, this.el); + this.renderAt("website.empty_image_gallery_alert", {}, this.el); } onAddImage() { const applySpec = { editingElement: this.el }; @@ -17,6 +17,6 @@ export class ImageGalleryEdit extends Interaction { } } -registry.category("public.interactions.edit").add("html_builder.image_gallery_edit", { +registry.category("public.interactions.edit").add("website.image_gallery_edit", { Interaction: ImageGalleryEdit, }); diff --git a/addons/html_builder/static/src/interactions/image_gallery.edit.xml b/addons/website/static/src/interactions/image_gallery.edit.xml similarity index 86% rename from addons/html_builder/static/src/interactions/image_gallery.edit.xml rename to addons/website/static/src/interactions/image_gallery.edit.xml index aae585c0f1b8a..47e4d92e2285e 100644 --- a/addons/html_builder/static/src/interactions/image_gallery.edit.xml +++ b/addons/website/static/src/interactions/image_gallery.edit.xml @@ -1,7 +1,7 @@ - +
diff --git a/addons/html_builder/static/src/interactions/social_media.edit.js b/addons/website/static/src/interactions/social_media.edit.js similarity index 60% rename from addons/html_builder/static/src/interactions/social_media.edit.js rename to addons/website/static/src/interactions/social_media.edit.js index d7c487b6248ac..45b0df5617150 100644 --- a/addons/html_builder/static/src/interactions/social_media.edit.js +++ b/addons/website/static/src/interactions/social_media.edit.js @@ -5,10 +5,10 @@ export class SocialMediaEdit extends Interaction { static selector = ".s_social_media > :first-child"; setup() { - this.renderAt("html_builder.empty_social_media_alert", {}, undefined, "afterend"); + this.renderAt("website.empty_social_media_alert", {}, undefined, "afterend"); } } -registry.category("public.interactions.edit").add("html_builder.social_media_edit", { +registry.category("public.interactions.edit").add("website.social_media_edit", { Interaction: SocialMediaEdit, }); diff --git a/addons/html_builder/static/src/interactions/social_media.edit.xml b/addons/website/static/src/interactions/social_media.edit.xml similarity index 84% rename from addons/html_builder/static/src/interactions/social_media.edit.xml rename to addons/website/static/src/interactions/social_media.edit.xml index d87a8832eeaeb..1b79c7e1e6450 100644 --- a/addons/html_builder/static/src/interactions/social_media.edit.xml +++ b/addons/website/static/src/interactions/social_media.edit.xml @@ -1,7 +1,7 @@ - +
Click here to setup your social networks
diff --git a/addons/website/static/tests/interactions/carousel/carousel_section_slider.edit.test.js b/addons/website/static/tests/interactions/carousel/carousel_section_slider.edit.test.js index 38c8376a9cee4..56bfd2160ff89 100644 --- a/addons/website/static/tests/interactions/carousel/carousel_section_slider.edit.test.js +++ b/addons/website/static/tests/interactions/carousel/carousel_section_slider.edit.test.js @@ -8,7 +8,7 @@ import { describe, expect, test } from "@odoo/hoot"; import { switchToEditMode } from "../../helpers"; import { queryAll } from "@odoo/hoot-dom"; -setupInteractionWhiteList("website.carousel_section_slider"); +setupInteractionWhiteList("website.carousel_edit"); describe.current.tags("interaction_dev"); diff --git a/addons/website/static/tests/interactions/carousel/carousel_slider.edit.test.js b/addons/website/static/tests/interactions/carousel/carousel_slider.edit.test.js index 3e7c175023dae..debd8a2e9b721 100644 --- a/addons/website/static/tests/interactions/carousel/carousel_slider.edit.test.js +++ b/addons/website/static/tests/interactions/carousel/carousel_slider.edit.test.js @@ -5,7 +5,7 @@ import { manuallyDispatchProgrammaticEvent, queryFirst, queryOne } from "@odoo/h import { switchToEditMode } from "../../helpers"; -setupInteractionWhiteList("website.carousel_slider"); +setupInteractionWhiteList("website.carousel_edit"); describe.current.tags("interaction_dev"); From 58d71cebc1f20d488cbedfbbe028296f8bd96b53 Mon Sep 17 00:00:00 2001 From: Nicolas Bayet Date: Wed, 14 May 2025 13:50:08 +0200 Subject: [PATCH 179/240] add comment --- .../html_editor/static/src/core/history_plugin.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/addons/html_editor/static/src/core/history_plugin.js b/addons/html_editor/static/src/core/history_plugin.js index 6c5ebc40440f3..543de072334a7 100644 --- a/addons/html_editor/static/src/core/history_plugin.js +++ b/addons/html_editor/static/src/core/history_plugin.js @@ -1232,8 +1232,13 @@ export class HistoryPlugin extends Plugin { revertOperation = this.makeSavePoint(); this.isPreviewing = true; operation(...args); + // todo: We should not add a step on preview as it would send + // unnecessary steps in collaboration and let the other peer see + // what we preview. + // // The operation should be similar than in the 'commit' - // (normalize etc...) hence the 'addStep'. + // (normalize etc...) hence the 'addStep' (but we need to remove + // it for the collaboration). this.addStep(); }, commit: (...args) => { @@ -1270,8 +1275,13 @@ export class HistoryPlugin extends Plugin { this.isPreviewing = true; await operation(...args); def.resolve(); + // todo: We should not add a step on preview as it would send + // unnecessary steps in collaboration and let the other peer see + // what we preview. + // // The operation should be similar than in the 'commit' - // (normalize etc...) hence the 'addStep'. + // (normalize etc...) hence the 'addStep' (but we need to remove + // it for the collaboration). this.addStep(); }, commit: async (...args) => { From 69c9dc157b5321458ee342ae472145cffc5aadb1 Mon Sep 17 00:00:00 2001 From: "Louis (loco)" Date: Wed, 7 May 2025 14:39:05 +0200 Subject: [PATCH 180/240] Do not start all plugins in translate mode --- addons/html_builder/static/src/builder.js | 8 ++- addons/html_builder/static/src/builder.xml | 3 +- .../static/src/core/builder_options_plugin.js | 5 ++ .../core/builder_options_plugin_translate.js | 12 ++++ .../builder_overlay/builder_overlay_plugin.js | 3 +- .../src/core/disable_snippets_plugin.js | 3 +- .../disable_snippets_plugin_translation.js | 11 ++++ .../overlay_buttons/overlay_buttons_plugin.js | 3 +- .../static/src/core/save_plugin.js | 2 + .../static/src/core/setup_editor_plugin.js | 2 + .../static/src/core/visibility_plugin.js | 35 ++++++------ .../src/sidebar/customize_translation_tab.xml | 12 ++++ .../plugins/options/popup_option_plugin.js | 52 ++--------------- .../options/visibility_option_plugin.js | 46 +++------------ .../plugins/popup_visibility_plugin.js | 56 +++++++++++++++++++ .../plugins/translation_plugin.js | 11 +--- .../plugins/website_visibility_plugin.js | 49 ++++++++++++++++ .../website_preview/website_builder_action.js | 7 ++- .../static/tests/invisible_elements.test.js | 27 ++++++++- 19 files changed, 227 insertions(+), 120 deletions(-) create mode 100644 addons/html_builder/static/src/core/builder_options_plugin_translate.js create mode 100644 addons/html_builder/static/src/core/disable_snippets_plugin_translation.js create mode 100644 addons/html_builder/static/src/sidebar/customize_translation_tab.xml create mode 100644 addons/html_builder/static/src/website_builder/plugins/popup_visibility_plugin.js create mode 100644 addons/html_builder/static/src/website_builder/plugins/website_visibility_plugin.js diff --git a/addons/html_builder/static/src/builder.js b/addons/html_builder/static/src/builder.js index a3f68173a2734..ea66aa9fd09dc 100644 --- a/addons/html_builder/static/src/builder.js +++ b/addons/html_builder/static/src/builder.js @@ -25,6 +25,7 @@ import { CustomizeTab } from "./sidebar/customize_tab"; import { ThemeTab } from "@html_builder/website_builder/plugins/theme/theme_tab"; import { CORE_PLUGINS } from "./core/core_plugins"; import { EDITOR_COLOR_CSS_VARIABLES, getCSSVariableValue } from "./utils/utils_css"; +import { withSequence } from "@html_editor/utils/resource"; export class Builder extends Component { static template = "html_builder.Builder"; @@ -76,7 +77,8 @@ export class Builder extends Component { "BannerPlugin", ] ); - const Plugins = [...mainPlugins, ...CORE_PLUGINS, ...(this.props.Plugins || [])]; + const corePlugins = this.props.isTranslation ? [] : CORE_PLUGINS; + const Plugins = [...mainPlugins, ...corePlugins, ...(this.props.Plugins || [])]; // TODO: maybe do a different config for the translate mode and the // "regular" mode. this.editor = new Editor( @@ -103,9 +105,9 @@ export class Builder extends Component { trigger_dom_updated: () => { editorBus.trigger("DOM_UPDATED"); }, - on_mobile_preview_clicked: () => { + on_mobile_preview_clicked: withSequence(20, () => { editorBus.trigger("DOM_UPDATED"); - }, + }), change_current_options_containers_listeners: (currentOptionsContainers) => { this.state.currentOptionsContainers = currentOptionsContainers; if (!currentOptionsContainers.length) { diff --git a/addons/html_builder/static/src/builder.xml b/addons/html_builder/static/src/builder.xml index c5479b3c9a20b..7a297c6a654f3 100644 --- a/addons/html_builder/static/src/builder.xml +++ b/addons/html_builder/static/src/builder.xml @@ -34,7 +34,8 @@ - + + diff --git a/addons/html_builder/static/src/core/builder_options_plugin.js b/addons/html_builder/static/src/core/builder_options_plugin.js index 612c938d955e9..786ca18566b06 100644 --- a/addons/html_builder/static/src/core/builder_options_plugin.js +++ b/addons/html_builder/static/src/core/builder_options_plugin.js @@ -20,6 +20,7 @@ export class BuilderOptionsPlugin extends Plugin { "getContainers", "updateContainers", "deactivateContainers", + "getTarget", "getPageContainers", "getRemoveDisabledReason", "getCloneDisabledReason", @@ -150,6 +151,10 @@ export class BuilderOptionsPlugin extends Plugin { this.dispatchTo("change_current_options_containers_listeners", this.lastContainers); } + getTarget() { + return this.target; + } + deactivateContainers() { this.target = null; this.lastContainers = []; diff --git a/addons/html_builder/static/src/core/builder_options_plugin_translate.js b/addons/html_builder/static/src/core/builder_options_plugin_translate.js new file mode 100644 index 0000000000000..e60db64893d94 --- /dev/null +++ b/addons/html_builder/static/src/core/builder_options_plugin_translate.js @@ -0,0 +1,12 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; + +export class BuilderOptionsPlugin extends Plugin { + static id = "builder-options"; + static shared = ["deactivateContainers", "getTarget"]; + + deactivateContainers() {} + getTarget() {} +} + +registry.category("translation-plugins").add(BuilderOptionsPlugin.id, BuilderOptionsPlugin); diff --git a/addons/html_builder/static/src/core/builder_overlay/builder_overlay_plugin.js b/addons/html_builder/static/src/core/builder_overlay/builder_overlay_plugin.js index c2022afb62542..440cb92a6a4be 100644 --- a/addons/html_builder/static/src/core/builder_overlay/builder_overlay_plugin.js +++ b/addons/html_builder/static/src/core/builder_overlay/builder_overlay_plugin.js @@ -3,6 +3,7 @@ import { throttleForAnimation } from "@web/core/utils/timing"; import { getScrollingElement, getScrollingTarget } from "@web/core/utils/scrolling"; import { checkElement } from "../builder_options_plugin"; import { BuilderOverlay, sizingY, sizingX, sizingGrid } from "./builder_overlay"; +import { withSequence } from "@html_editor/utils/resource"; function isResizable(el) { const isResizableY = el.matches(sizingY.selector) && !el.matches(sizingY.exclude); @@ -18,7 +19,7 @@ export class BuilderOverlayPlugin extends Plugin { resources = { step_added_handlers: this.refreshOverlays.bind(this), change_current_options_containers_listeners: this.openBuilderOverlays.bind(this), - on_mobile_preview_clicked: this.refreshOverlays.bind(this), + on_mobile_preview_clicked: withSequence(20, this.refreshOverlays.bind(this)), has_overlay_options: { hasOption: (el) => isResizable(el) }, }; diff --git a/addons/html_builder/static/src/core/disable_snippets_plugin.js b/addons/html_builder/static/src/core/disable_snippets_plugin.js index 0d5fbaebbca3d..c3c0793cbbfa4 100644 --- a/addons/html_builder/static/src/core/disable_snippets_plugin.js +++ b/addons/html_builder/static/src/core/disable_snippets_plugin.js @@ -1,5 +1,6 @@ import { omit } from "@web/core/utils/objects"; import { Plugin } from "@html_editor/plugin"; +import { withSequence } from "@html_editor/utils/resource"; export class DisableSnippetsPlugin extends Plugin { static id = "disableSnippets"; @@ -7,9 +8,9 @@ export class DisableSnippetsPlugin extends Plugin { static shared = ["disableUndroppableSnippets"]; resources = { after_remove_handlers: this.disableUndroppableSnippets.bind(this), - on_mobile_preview_clicked: this.disableUndroppableSnippets.bind(this), post_undo_handlers: this.disableUndroppableSnippets.bind(this), post_redo_handlers: this.disableUndroppableSnippets.bind(this), + on_mobile_preview_clicked: withSequence(20, this.disableUndroppableSnippets.bind(this)), }; setup() { diff --git a/addons/html_builder/static/src/core/disable_snippets_plugin_translation.js b/addons/html_builder/static/src/core/disable_snippets_plugin_translation.js new file mode 100644 index 0000000000000..1911604227540 --- /dev/null +++ b/addons/html_builder/static/src/core/disable_snippets_plugin_translation.js @@ -0,0 +1,11 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; + +export class DisableSnippetsPlugin extends Plugin { + static id = "disableSnippets"; + static shared = ["disableUndroppableSnippets"]; + + disableUndroppableSnippets() {} +} + +registry.category("translation-plugins").add(DisableSnippetsPlugin.id, DisableSnippetsPlugin); diff --git a/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons_plugin.js b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons_plugin.js index 278535e054638..9ce753db2d202 100644 --- a/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons_plugin.js +++ b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons_plugin.js @@ -4,6 +4,7 @@ import { throttleForAnimation } from "@web/core/utils/timing"; import { getScrollingElement, getScrollingTarget } from "@web/core/utils/scrolling"; import { checkElement } from "../builder_options_plugin"; import { OverlayButtons } from "./overlay_buttons"; +import { withSequence } from "@html_editor/utils/resource"; export class OverlayButtonsPlugin extends Plugin { static id = "overlayButtons"; @@ -17,7 +18,7 @@ export class OverlayButtonsPlugin extends Plugin { resources = { step_added_handlers: this.refreshButtons.bind(this), change_current_options_containers_listeners: this.addOverlayButtons.bind(this), - on_mobile_preview_clicked: this.refreshButtons.bind(this), + on_mobile_preview_clicked: withSequence(20, this.refreshButtons.bind(this)), }; setup() { diff --git a/addons/html_builder/static/src/core/save_plugin.js b/addons/html_builder/static/src/core/save_plugin.js index ae93f4d6b5eda..58265fe20e978 100644 --- a/addons/html_builder/static/src/core/save_plugin.js +++ b/addons/html_builder/static/src/core/save_plugin.js @@ -1,5 +1,6 @@ import { Plugin } from "@html_editor/plugin"; import { rpc } from "@web/core/network/rpc"; +import { registry } from "@web/core/registry"; const oeStructureSelector = "#wrapwrap .oe_structure[data-oe-xpath][data-oe-id]"; const oeFieldSelector = "#wrapwrap [data-oe-field]:not([data-oe-sanitize-prevent-edition])"; @@ -222,3 +223,4 @@ export class SavePlugin extends Plugin { } } } +registry.category("translation-plugins").add(SavePlugin.id, SavePlugin); diff --git a/addons/html_builder/static/src/core/setup_editor_plugin.js b/addons/html_builder/static/src/core/setup_editor_plugin.js index a1bebc0659ffe..e9d35850387cf 100644 --- a/addons/html_builder/static/src/core/setup_editor_plugin.js +++ b/addons/html_builder/static/src/core/setup_editor_plugin.js @@ -1,6 +1,7 @@ import { Plugin } from "@html_editor/plugin"; import { _t } from "@web/core/l10n/translation"; import { getTranslationEditableEls } from "@html_builder/website_builder/plugins/translation_plugin"; +import { registry } from "@web/core/registry"; export class SetupEditorPlugin extends Plugin { static id = "setup_editor_plugin"; @@ -103,3 +104,4 @@ export class SetupEditorPlugin extends Plugin { return editablesAreaEls; } } +registry.category("translation-plugins").add(SetupEditorPlugin.id, SetupEditorPlugin); diff --git a/addons/html_builder/static/src/core/visibility_plugin.js b/addons/html_builder/static/src/core/visibility_plugin.js index 7805fd3641dae..c75c6de50b42b 100644 --- a/addons/html_builder/static/src/core/visibility_plugin.js +++ b/addons/html_builder/static/src/core/visibility_plugin.js @@ -1,5 +1,7 @@ import { Plugin } from "@html_editor/plugin"; import { isMobileView } from "@html_builder/utils/utils"; +import { registry } from "@web/core/registry"; +import { withSequence } from "@html_editor/utils/resource"; export class VisibilityPlugin extends Plugin { static id = "visibility"; @@ -10,7 +12,7 @@ export class VisibilityPlugin extends Plugin { "onOptionVisibilityUpdate", ]; resources = { - on_mobile_preview_clicked: this.onMobilePreviewClicked.bind(this), + on_mobile_preview_clicked: withSequence(10, this.onMobilePreviewClicked.bind(this)), system_attributes: ["data-invisible"], system_classes: ["o_snippet_override_invisible"], }; @@ -60,17 +62,21 @@ export class VisibilityPlugin extends Plugin { } onMobilePreviewClicked() { - const isMobilePreview = isMobileView(this.editable); const invisibleOverrideEls = this.editable.querySelectorAll( ".o_snippet_mobile_invisible, .o_snippet_desktop_invisible" ); for (const invisibleOverrideEl of [...invisibleOverrideEls]) { - const isMobileHidden = invisibleOverrideEl.classList.contains( - "o_snippet_mobile_invisible" - ); invisibleOverrideEl.classList.remove("o_snippet_override_invisible"); - const show = isMobilePreview !== isMobileHidden; - this.toggleVisibilityStatus(invisibleOverrideEl, show); + const show = this.toggleVisibilityStatus({ + editingEl: invisibleOverrideEl, + considerDeviceVisibility: true, + }); + if ( + !show && + invisibleOverrideEl.contains(this.dependencies["builder-options"].getTarget()) + ) { + this.dependencies["builder-options"].deactivateContainers(); + } } } @@ -83,7 +89,7 @@ export class VisibilityPlugin extends Plugin { * @returns {Boolean} */ toggleTargetVisibility(editingEl, show, considerDeviceVisibility) { - show = this.toggleVisibilityStatus(editingEl, show, considerDeviceVisibility); + show = this.toggleVisibilityStatus({ editingEl, show, considerDeviceVisibility }); const dispatchName = show ? "target_show" : "target_hide"; this.dispatchTo(dispatchName, editingEl); return show; @@ -96,8 +102,7 @@ export class VisibilityPlugin extends Plugin { * @param {Boolean} show true/false if the element was shown/hidden */ onOptionVisibilityUpdate(editingEl, show) { - const isShown = this.toggleVisibilityStatus(editingEl, show); - + const isShown = this.toggleVisibilityStatus({ editingEl, show }); if (!isShown) { this.dependencies["builder-options"].deactivateContainers(); } @@ -114,18 +119,14 @@ export class VisibilityPlugin extends Plugin { * @param {Boolean} considerDeviceVisibility * @returns {Boolean} */ - toggleVisibilityStatus(editingEl, show, considerDeviceVisibility) { + toggleVisibilityStatus({ editingEl, show, considerDeviceVisibility = false }) { if ( considerDeviceVisibility && editingEl.matches(".o_snippet_mobile_invisible, .o_snippet_desktop_invisible") ) { const isMobilePreview = isMobileView(editingEl); const isMobileHidden = editingEl.classList.contains("o_snippet_mobile_invisible"); - if (isMobilePreview === isMobileHidden) { - // If the preview mode and the hidden type are the same, the - // element is considered as hidden. - show = false; - } + show = isMobilePreview !== isMobileHidden; } if (show === undefined) { @@ -143,3 +144,5 @@ export class VisibilityPlugin extends Plugin { function isTargetVisible(editingEl) { return editingEl.dataset.invisible !== "1"; } + +registry.category("translation-plugins").add(VisibilityPlugin.id, VisibilityPlugin); diff --git a/addons/html_builder/static/src/sidebar/customize_translation_tab.xml b/addons/html_builder/static/src/sidebar/customize_translation_tab.xml new file mode 100644 index 0000000000000..76beceae86f39 --- /dev/null +++ b/addons/html_builder/static/src/sidebar/customize_translation_tab.xml @@ -0,0 +1,12 @@ + + + + +
+
+ Select content on your page to translate it. +
+
+ + + diff --git a/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js index 84cc239f221fa..8f0e22199f01d 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js @@ -9,7 +9,7 @@ export const COOKIES_BAR = SNIPPET_SPECIFIC_END; class PopupOptionPlugin extends Plugin { static id = "PopupOption"; - static dependencies = ["anchor", "visibility", "history"]; + static dependencies = ["anchor", "visibility", "history", "popupVisibilityPlugin"]; resources = { builder_options: [ @@ -34,24 +34,8 @@ class PopupOptionPlugin extends Plugin { on_cloned_handlers: this.onCloned.bind(this), on_remove_handlers: this.onRemove.bind(this), on_snippet_dropped_handlers: this.onSnippetDropped.bind(this), - target_show: this.onTargetShow.bind(this), - target_hide: this.onTargetHide.bind(this), - clean_for_save_handlers: this.cleanForSave.bind(this), }; - setup() { - this.addDomListener(this.editable, "click", (ev) => { - // Note: links are excluded here so that internal modal buttons do - // not close the popup as we want to allow edition of those buttons. - if (ev.target.matches(".s_popup .js_close_popup:not(a, .btn)")) { - ev.stopPropagation(); - const popupEl = ev.target.closest(".s_popup"); - this.onTargetHide(popupEl); - this.dependencies.visibility.onOptionVisibilityUpdate(popupEl, false); - } - }); - } - getActions() { return { // Moves the snippet in #o_shared_blocks to be common to all pages @@ -115,11 +99,11 @@ class PopupOptionPlugin extends Plugin { } onRemove(el) { - this.onTargetHide(el); + this.dependencies.popupVisibilityPlugin.onTargetHide(el); this.dependencies.history.addCustomMutation({ apply: () => {}, revert: () => { - this.onTargetShow(el); + this.dependencies.popupVisibilityPlugin.onTargetShow(el); }, }); } @@ -129,10 +113,10 @@ class PopupOptionPlugin extends Plugin { this.assignUniqueID(snippetEl); this.dependencies.history.addCustomMutation({ apply: () => { - this.onTargetShow(snippetEl); + this.dependencies.popupVisibilityPlugin.onTargetShow(snippetEl); }, revert: () => { - this.onTargetHide(snippetEl); + this.dependencies.popupVisibilityPlugin.onTargetHide(snippetEl); }, }); } @@ -142,32 +126,6 @@ class PopupOptionPlugin extends Plugin { ); } - onTargetShow(target) { - // Check if the popup is within the editable, because it is cloned on - // save (see save plugin) and Bootstrap moves it if it is not within the - // document (see Bootstrap Modal's _showElement). - if (target.matches(".s_popup") && this.editable.contains(target)) { - this.window.Modal.getOrCreateInstance(target.querySelector(".modal")).show(); - } - } - - onTargetHide(target) { - if (target.matches(".s_popup")) { - this.window.Modal.getOrCreateInstance(target.querySelector(".modal")).hide(); - } - } - - cleanForSave({ root }) { - for (const modalEl of root.querySelectorAll(".s_popup .modal.show")) { - modalEl.parentElement.dataset.invisible = "1"; - // Do not call .hide() directly, because it is queued whereas - // .dispose() is not. - modalEl.classList.remove("show"); - this.window.Modal.getOrCreateInstance(modalEl)._hideModal(); - this.window.Modal.getInstance(modalEl).dispose(); - } - } - assignUniqueID(editingElement) { editingElement.closest(".s_popup").id = `sPopup${Date.now()}`; } diff --git a/addons/html_builder/static/src/website_builder/plugins/options/visibility_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/visibility_option_plugin.js index b0a9c565b93cb..2b348ff7b475a 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/visibility_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/visibility_option_plugin.js @@ -2,7 +2,7 @@ import { registry } from "@web/core/registry"; import { Plugin } from "@html_editor/plugin"; import { selectElements } from "@html_editor/utils/dom_traversal"; import { pyToJsLocale } from "@web/core/l10n/utils"; -import { getElementsWithOption, isMobileView } from "@html_builder/utils/utils"; +import { getElementsWithOption } from "@html_builder/utils/utils"; import { VisibilityOption } from "./visibility_option"; import { withSequence } from "@html_editor/utils/resource"; import { @@ -10,8 +10,8 @@ import { DEVICE_VISIBILITY, } from "@html_builder/website_builder/option_sequence"; -const visibilityOptionSelector = "section, .s_hr"; -const deviceVisibilityOptionSelector = "section .row > div"; +export const VISIBILITY_OPTION_SELECTOR = "section, .s_hr"; +export const DEVICE_VISIBILITY_OPTION_SELECTOR = "section .row > div"; class VisibilityOptionPlugin extends Plugin { static id = "visibilityOption"; @@ -23,19 +23,17 @@ class VisibilityOptionPlugin extends Plugin { props: { websiteSession: this.dependencies.websiteSession.getSession(), }, - selector: visibilityOptionSelector, + selector: VISIBILITY_OPTION_SELECTOR, cleanForSave: this.dependencies.visibility.cleanForSaveVisibility, }), withSequence(DEVICE_VISIBILITY, { template: "html_builder.DeviceVisibilityOption", - selector: deviceVisibilityOptionSelector, + selector: DEVICE_VISIBILITY_OPTION_SELECTOR, exclude: ".s_col_no_resize.row > div, .s_masonry_block .s_col_no_resize", cleanForSave: this.dependencies.visibility.cleanForSaveVisibility, }), ], builder_actions: this.getActions(), - target_show: this.onTargetShow.bind(this), - target_hide: this.onTargetHide.bind(this), on_snippet_dropped_handlers: this.onSnippetDropped.bind(this), normalize_handlers: this.normalizeCSSSelectors.bind(this), visibility_selector_parameters: [ @@ -145,38 +143,8 @@ class VisibilityOptionPlugin extends Plugin { return false; } - onTargetHide(editingEl) { - if ( - editingEl.matches(deviceVisibilityOptionSelector) || - editingEl.matches(visibilityOptionSelector) - ) { - editingEl.classList.remove("o_snippet_override_invisible"); - - const isConditionalHidden = editingEl.matches("[data-visibility='conditional']"); - if (isConditionalHidden) { - editingEl.classList.add("o_conditional_hidden"); - } - } - } - - onTargetShow(editingEl) { - if ( - editingEl.matches(deviceVisibilityOptionSelector) || - editingEl.matches(visibilityOptionSelector) - ) { - const isMobilePreview = isMobileView(editingEl); - const isMobileHidden = editingEl.classList.contains("o_snippet_mobile_invisible"); - const isDesktopHidden = editingEl.classList.contains("o_snippet_desktop_invisible"); - if ((isMobileHidden && isMobilePreview) || (isDesktopHidden && !isMobilePreview)) { - editingEl.classList.add("o_snippet_override_invisible"); - } - - editingEl.classList.remove("o_conditional_hidden"); - } - } - onSnippetDropped({ snippetEl }) { - const selector = [visibilityOptionSelector, deviceVisibilityOptionSelector].join(", "); + const selector = [VISIBILITY_OPTION_SELECTOR, DEVICE_VISIBILITY_OPTION_SELECTOR].join(", "); const droppedEls = getElementsWithOption(snippetEl, selector); droppedEls.forEach((droppedEl) => this.dependencies.visibility.toggleTargetVisibility(droppedEl, true, true) @@ -184,7 +152,7 @@ class VisibilityOptionPlugin extends Plugin { } normalizeCSSSelectors(rootEl) { - for (const el of selectElements(rootEl, visibilityOptionSelector)) { + for (const el of selectElements(rootEl, VISIBILITY_OPTION_SELECTOR)) { this.updateCSSSelectors(el); } } diff --git a/addons/html_builder/static/src/website_builder/plugins/popup_visibility_plugin.js b/addons/html_builder/static/src/website_builder/plugins/popup_visibility_plugin.js new file mode 100644 index 0000000000000..930e978bd5fc2 --- /dev/null +++ b/addons/html_builder/static/src/website_builder/plugins/popup_visibility_plugin.js @@ -0,0 +1,56 @@ +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; + +class PopupVisibilityPlugin extends Plugin { + static id = "popupVisibilityPlugin"; + static dependencies = ["visibility"]; + static shared = ["onTargetShow", "onTargetHide"]; + + resources = { + target_show: this.onTargetShow.bind(this), + target_hide: this.onTargetHide.bind(this), + clean_for_save_handlers: this.cleanForSave.bind(this), + }; + + setup() { + this.addDomListener(this.editable, "click", (ev) => { + // Note: links are excluded here so that internal modal buttons do + // not close the popup as we want to allow edition of those buttons. + if (ev.target.matches(".s_popup .js_close_popup:not(a, .btn)")) { + ev.stopPropagation(); + const popupEl = ev.target.closest(".s_popup"); + this.onTargetHide(popupEl); + this.dependencies.visibility.onOptionVisibilityUpdate(popupEl, false); + } + }); + } + + onTargetShow(target) { + // Check if the popup is within the editable, because it is cloned on + // save (see save plugin) and Bootstrap moves it if it is not within the + // document (see Bootstrap Modal's _showElement). + if (target.matches(".s_popup") && this.editable.contains(target)) { + this.window.Modal.getOrCreateInstance(target.querySelector(".modal")).show(); + } + } + + onTargetHide(target) { + if (target.matches(".s_popup")) { + this.window.Modal.getOrCreateInstance(target.querySelector(".modal")).hide(); + } + } + + cleanForSave({ root }) { + for (const modalEl of root.querySelectorAll(".s_popup .modal.show")) { + modalEl.parentElement.dataset.invisible = "1"; + // Do not call .hide() directly, because it is queued whereas + // .dispose() is not. + modalEl.classList.remove("show"); + this.window.Modal.getOrCreateInstance(modalEl)._hideModal(); + this.window.Modal.getInstance(modalEl).dispose(); + } + } +} + +registry.category("website-plugins").add(PopupVisibilityPlugin.id, PopupVisibilityPlugin); +registry.category("translation-plugins").add(PopupVisibilityPlugin.id, PopupVisibilityPlugin); diff --git a/addons/html_builder/static/src/website_builder/plugins/translation_plugin.js b/addons/html_builder/static/src/website_builder/plugins/translation_plugin.js index 57fc8eb570e0c..1855ca11e855c 100644 --- a/addons/html_builder/static/src/website_builder/plugins/translation_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/translation_plugin.js @@ -57,10 +57,8 @@ export class TranslationPlugin extends Plugin { clean_for_save_handlers: this.cleanForSave.bind(this), get_dirty_els: this.getDirtyTranslations.bind(this), after_setup_editor_handlers: () => { - if (this.config.isTranslation) { - this.setupServicesIfNotSet(); - this.prepareTranslation(); - } + this.setupServicesIfNotSet(); + this.prepareTranslation(); }, }; @@ -306,9 +304,6 @@ export class TranslationPlugin extends Plugin { * @returns {HTMLElement[]} */ getDirtyTranslations() { - if (!this.config.isTranslation) { - return []; - } const dirtyEls = []; for (const [translateEl, translationInfo] of this.elToTranslationInfoMap) { for (const [attr, data] of Object.entries(translationInfo)) { @@ -351,4 +346,4 @@ export class TranslationPlugin extends Plugin { } } -registry.category("website-plugins").add(TranslationPlugin.id, TranslationPlugin); +registry.category("translation-plugins").add(TranslationPlugin.id, TranslationPlugin); diff --git a/addons/html_builder/static/src/website_builder/plugins/website_visibility_plugin.js b/addons/html_builder/static/src/website_builder/plugins/website_visibility_plugin.js new file mode 100644 index 0000000000000..96ee02af801bf --- /dev/null +++ b/addons/html_builder/static/src/website_builder/plugins/website_visibility_plugin.js @@ -0,0 +1,49 @@ +import { isMobileView } from "@html_builder/utils/utils"; +import { Plugin } from "@html_editor/plugin"; +import { registry } from "@web/core/registry"; +import { + DEVICE_VISIBILITY_OPTION_SELECTOR, + VISIBILITY_OPTION_SELECTOR, +} from "./options/visibility_option_plugin"; + +class WebsiteVisibilityPlugin extends Plugin { + static id = "websiteVisibilityPlugin"; + + resources = { + target_show: this.onTargetShow.bind(this), + target_hide: this.onTargetHide.bind(this), + }; + + onTargetHide(editingEl) { + if ( + editingEl.matches(DEVICE_VISIBILITY_OPTION_SELECTOR) || + editingEl.matches(VISIBILITY_OPTION_SELECTOR) + ) { + editingEl.classList.remove("o_snippet_override_invisible"); + + const isConditionalHidden = editingEl.matches("[data-visibility='conditional']"); + if (isConditionalHidden) { + editingEl.classList.add("o_conditional_hidden"); + } + } + } + + onTargetShow(editingEl) { + if ( + editingEl.matches(DEVICE_VISIBILITY_OPTION_SELECTOR) || + editingEl.matches(VISIBILITY_OPTION_SELECTOR) + ) { + const isMobilePreview = isMobileView(editingEl); + const isMobileHidden = editingEl.classList.contains("o_snippet_mobile_invisible"); + const isDesktopHidden = editingEl.classList.contains("o_snippet_desktop_invisible"); + if ((isMobileHidden && isMobilePreview) || (isDesktopHidden && !isMobilePreview)) { + editingEl.classList.add("o_snippet_override_invisible"); + } + + editingEl.classList.remove("o_conditional_hidden"); + } + } +} + +registry.category("website-plugins").add(WebsiteVisibilityPlugin.id, WebsiteVisibilityPlugin); +registry.category("translation-plugins").add(WebsiteVisibilityPlugin.id, WebsiteVisibilityPlugin); diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.js b/addons/html_builder/static/src/website_preview/website_builder_action.js index c2b5c1b1f1574..20db8b059b583 100644 --- a/addons/html_builder/static/src/website_preview/website_builder_action.js +++ b/addons/html_builder/static/src/website_preview/website_builder_action.js @@ -158,7 +158,10 @@ export class WebsiteBuilder extends Component { } get menuProps() { - const WebsitePlugins = registry.category("website-plugins").getAll(); + const websitePlugins = this.translation + ? registry.category("translation-plugins").getAll() + : registry.category("website-plugins").getAll(); + return { closeEditor: this.reloadIframeAndCloseEditor.bind(this), reloadEditor: this.reloadEditor.bind(this), @@ -168,7 +171,7 @@ export class WebsiteBuilder extends Component { isTranslation: this.translation, iframeLoaded: this.iframeLoaded, isMobile: this.websiteContext.isMobile, - Plugins: WebsitePlugins, + Plugins: websitePlugins, config: { initialTarget: this.target, initialTab: this.initialTab }, }; } diff --git a/addons/html_builder/static/tests/invisible_elements.test.js b/addons/html_builder/static/tests/invisible_elements.test.js index 1bdda4042eaf7..1893fc55be6a3 100644 --- a/addons/html_builder/static/tests/invisible_elements.test.js +++ b/addons/html_builder/static/tests/invisible_elements.test.js @@ -92,7 +92,7 @@ test("Add an element on the invisible elements tab", async () => { ).toHaveCount(1); }); -test("mobile and desktop invisible elements", async () => { +test("mobile and desktop invisible elements panel", async () => { await setupWebsiteBuilder(`
@@ -109,6 +109,31 @@ test("mobile and desktop invisible elements", async () => { ]); }); +test("mobile and desktop option container", async () => { + await setupWebsiteBuilder(` +
+ `); + await contains(".o_we_invisible_el_panel .o_we_invisible_entry").click(); + expect(".options-container").toBeDisplayed(); + await contains("button[data-action='mobile']").click(); + expect(".options-container").toBeDisplayed(); + await contains("button[data-action='mobile']").click(); + expect(".options-container").not.toBeDisplayed(); +}); + +test("keep the option container of a visible snippet even if there are hidden snippet on the page", async () => { + await setupWebsiteBuilder(` +
+

TEST

+
+
+ `); + await contains(":iframe #my_el").click(); + expect(".options-container").toBeDisplayed(); + await contains("button[data-action='mobile']").click(); + expect(".options-container").toBeDisplayed(); +}); + test("invisible elements efficiency", async () => { patchWithCleanup(InvisibleElementsPanel.prototype, { updateInvisibleElementsPanel() { From 022ddf90458109688d31ec46147e8305a2334d73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Wed, 14 May 2025 14:32:54 +0200 Subject: [PATCH 181/240] misc cleanups --- addons/account_fleet/tests/test_account_fleet.py | 1 - .../account_fleet/tests/test_fleet_vehicle_log_services.py | 1 - addons/html_builder/__init__.py | 1 - addons/html_builder/__manifest__.py | 1 - .../plugins/highlight/highlight_configurator.xml | 2 +- .../website_builder/plugins/theme/theme_colors_option.xml | 6 +++--- addons/mail/tests/discuss/test_ui.py | 1 - addons/mass_mailing_sms/tests/test_mailing_ui.py | 1 - addons/portal/tests/test_tours.py | 1 - addons/web/tests/test_js.py | 1 - addons/website/tests/test_custom_snippets.py | 1 - addons/website/tests/test_grid_layout.py | 1 - addons/website/tests/test_skip_website_configurator.py | 1 - addons/website/tests/test_unsplash_beacon.py | 1 - addons/website/tests/test_website_reset_password.py | 1 - addons/website_sale/tests/test_delivery_ui.py | 1 - addons/website_sale/tests/test_website_editor.py | 1 - .../tests/test_website_sale_cart_notification.py | 1 - .../website_sale/tests/test_website_sale_cart_recovery.py | 1 - .../tests/test_website_sale_combo_configurator.py | 1 - addons/website_sale/tests/test_website_sale_gmc.py | 1 - addons/website_sale/tests/test_website_sale_mail.py | 1 - .../tests/test_click_and_collect_flow.py | 1 - .../tests/test_website_sale_comparison.py | 1 - addons/website_sale_loyalty/tests/test_shop_sale_coupon.py | 1 - .../tests/test_website_sale_loyalty_delivery.py | 1 - .../tests/test_website_sale_stock_configurators.py | 1 - .../tests/test_website_sale_stock_multilang.py | 1 - .../tests/test_website_sale_stock_reorder_from_portal.py | 1 - .../tests/test_website_sale_stock_stock_message.py | 1 - .../tests/test_website_sale_stock_stock_notification.py | 1 - .../test_website_sale_stock_wishlist_stock_notification.py | 1 - 32 files changed, 4 insertions(+), 34 deletions(-) diff --git a/addons/account_fleet/tests/test_account_fleet.py b/addons/account_fleet/tests/test_account_fleet.py index 03376b9c2161e..055d85253a500 100644 --- a/addons/account_fleet/tests/test_account_fleet.py +++ b/addons/account_fleet/tests/test_account_fleet.py @@ -3,7 +3,6 @@ from freezegun import freeze_time from odoo.tests import tagged -import unittest from odoo.addons.account.tests.common import AccountTestInvoicingCommon diff --git a/addons/account_fleet/tests/test_fleet_vehicle_log_services.py b/addons/account_fleet/tests/test_fleet_vehicle_log_services.py index 3437676be482a..50bea163b40f8 100644 --- a/addons/account_fleet/tests/test_fleet_vehicle_log_services.py +++ b/addons/account_fleet/tests/test_fleet_vehicle_log_services.py @@ -3,7 +3,6 @@ from odoo.exceptions import UserError from odoo.tests import tagged from odoo.addons.account.tests.common import AccountTestInvoicingCommon -import unittest @tagged('post_install', '-at_install') class TestFleetVehicleLogServices(AccountTestInvoicingCommon): diff --git a/addons/html_builder/__init__.py b/addons/html_builder/__init__.py index 40a96afc6ff09..e69de29bb2d1d 100644 --- a/addons/html_builder/__init__.py +++ b/addons/html_builder/__init__.py @@ -1 +0,0 @@ -# -*- coding: utf-8 -*- diff --git a/addons/html_builder/__manifest__.py b/addons/html_builder/__manifest__.py index 284b828041f2b..57683027dd8ed 100644 --- a/addons/html_builder/__manifest__.py +++ b/addons/html_builder/__manifest__.py @@ -1,4 +1,3 @@ -# -*- coding: utf-8 -*- { 'name': "HTML Builder", 'summary': "Generic html builder", diff --git a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.xml b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.xml index 2d92d9261e161..80b37b31c4504 100644 --- a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.xml +++ b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.xml @@ -19,7 +19,7 @@
- px + px
diff --git a/addons/html_builder/static/src/website_builder/plugins/theme/theme_colors_option.xml b/addons/html_builder/static/src/website_builder/plugins/theme/theme_colors_option.xml index 48bdfb262247e..ee75d98474e38 100644 --- a/addons/html_builder/static/src/website_builder/plugins/theme/theme_colors_option.xml +++ b/addons/html_builder/static/src/website_builder/plugins/theme/theme_colors_option.xml @@ -12,7 +12,7 @@
- Main + Main
- Light & Dark + Light & Dark
- Palette + Palette diff --git a/addons/mail/tests/discuss/test_ui.py b/addons/mail/tests/discuss/test_ui.py index 48effa091c06a..c07d93c585fb8 100644 --- a/addons/mail/tests/discuss/test_ui.py +++ b/addons/mail/tests/discuss/test_ui.py @@ -3,7 +3,6 @@ import odoo.tests from odoo import Command from odoo.addons.base.tests.common import HttpCaseWithUserDemo -import unittest @odoo.tests.tagged('post_install', '-at_install') class TestUi(HttpCaseWithUserDemo): diff --git a/addons/mass_mailing_sms/tests/test_mailing_ui.py b/addons/mass_mailing_sms/tests/test_mailing_ui.py index e6f5926500417..848f34e30d09e 100644 --- a/addons/mass_mailing_sms/tests/test_mailing_ui.py +++ b/addons/mass_mailing_sms/tests/test_mailing_ui.py @@ -1,7 +1,6 @@ # Part of Odoo. See LICENSE file for full copyright and licensing details. from odoo.tests import HttpCase, tagged, users -import unittest @tagged('post_install', '-at_install', 'mail_activity') class TestMailingUi(HttpCase): diff --git a/addons/portal/tests/test_tours.py b/addons/portal/tests/test_tours.py index f2e9eeb44272c..0325ae27b97ed 100644 --- a/addons/portal/tests/test_tours.py +++ b/addons/portal/tests/test_tours.py @@ -1,7 +1,6 @@ # Part of Odoo. See LICENSE file for full copyright and licensing details. from odoo.tests import tagged -import unittest from odoo.addons.base.tests.common import HttpCaseWithUserDemo, HttpCaseWithUserPortal diff --git a/addons/web/tests/test_js.py b/addons/web/tests/test_js.py index 338ce52423ca9..075d8f89f4ca3 100644 --- a/addons/web/tests/test_js.py +++ b/addons/web/tests/test_js.py @@ -7,7 +7,6 @@ import odoo.tests from odoo.tools.misc import file_open from werkzeug.urls import url_quote_plus -import unittest RE_FORBIDDEN_STATEMENTS = re.compile(r'test.*\.(only|debug)\(') RE_ONLY = re.compile(r'QUnit\.(only|debug)\(') diff --git a/addons/website/tests/test_custom_snippets.py b/addons/website/tests/test_custom_snippets.py index e2a882ef74e70..d571574da4132 100644 --- a/addons/website/tests/test_custom_snippets.py +++ b/addons/website/tests/test_custom_snippets.py @@ -2,7 +2,6 @@ from odoo import Command from odoo.tests import HttpCase, TransactionCase, tagged -import unittest @tagged('post_install', '-at_install') diff --git a/addons/website/tests/test_grid_layout.py b/addons/website/tests/test_grid_layout.py index f2d858bc2ffd9..85765bfb2ca66 100644 --- a/addons/website/tests/test_grid_layout.py +++ b/addons/website/tests/test_grid_layout.py @@ -2,7 +2,6 @@ import odoo.tests from odoo.addons.website.tools import create_image_attachment -import unittest @odoo.tests.common.tagged('post_install', '-at_install') class TestWebsiteGridLayout(odoo.tests.HttpCase): diff --git a/addons/website/tests/test_skip_website_configurator.py b/addons/website/tests/test_skip_website_configurator.py index c52982b781381..bce15249bfa04 100644 --- a/addons/website/tests/test_skip_website_configurator.py +++ b/addons/website/tests/test_skip_website_configurator.py @@ -1,6 +1,5 @@ from odoo.tests import tagged from odoo.addons.website.tests.test_configurator import TestConfiguratorCommon -import unittest @tagged('post_install', '-at_install') diff --git a/addons/website/tests/test_unsplash_beacon.py b/addons/website/tests/test_unsplash_beacon.py index 7ca0e30c37e37..ddaed1154e688 100644 --- a/addons/website/tests/test_unsplash_beacon.py +++ b/addons/website/tests/test_unsplash_beacon.py @@ -1,7 +1,6 @@ # Part of Odoo. See LICENSE file for full copyright and licensing details. import odoo.tests -import unittest @odoo.tests.common.tagged('post_install', '-at_install') diff --git a/addons/website/tests/test_website_reset_password.py b/addons/website/tests/test_website_reset_password.py index 87b369730bb5c..70fd24ab793c6 100644 --- a/addons/website/tests/test_website_reset_password.py +++ b/addons/website/tests/test_website_reset_password.py @@ -1,7 +1,6 @@ # Part of Odoo. See LICENSE file for full copyright and licensing details. from unittest.mock import patch -import unittest import odoo from odoo import Command diff --git a/addons/website_sale/tests/test_delivery_ui.py b/addons/website_sale/tests/test_delivery_ui.py index 88b2f1abcbade..e8e8d7744133c 100644 --- a/addons/website_sale/tests/test_delivery_ui.py +++ b/addons/website_sale/tests/test_delivery_ui.py @@ -2,7 +2,6 @@ import odoo.tests from odoo.fields import Command -import unittest @odoo.tests.tagged('post_install', '-at_install') class TestUi(odoo.tests.HttpCase): diff --git a/addons/website_sale/tests/test_website_editor.py b/addons/website_sale/tests/test_website_editor.py index 943bda914a865..e435e7a84948a 100644 --- a/addons/website_sale/tests/test_website_editor.py +++ b/addons/website_sale/tests/test_website_editor.py @@ -6,7 +6,6 @@ from odoo.exceptions import ValidationError from odoo.fields import Command from odoo.tests import HttpCase, tagged -import unittest from odoo.addons.website.tools import MockRequest from odoo.addons.website_sale.controllers.main import WebsiteSale diff --git a/addons/website_sale/tests/test_website_sale_cart_notification.py b/addons/website_sale/tests/test_website_sale_cart_notification.py index d357309aceb5d..fe36aa090b632 100644 --- a/addons/website_sale/tests/test_website_sale_cart_notification.py +++ b/addons/website_sale/tests/test_website_sale_cart_notification.py @@ -2,7 +2,6 @@ from odoo.fields import Command from odoo.tests import HttpCase, tagged -import unittest from odoo.addons.product.tests.common import ProductAttributesCommon diff --git a/addons/website_sale/tests/test_website_sale_cart_recovery.py b/addons/website_sale/tests/test_website_sale_cart_recovery.py index 9bc77d4668576..7b8a4ce0e36aa 100644 --- a/addons/website_sale/tests/test_website_sale_cart_recovery.py +++ b/addons/website_sale/tests/test_website_sale_cart_recovery.py @@ -2,7 +2,6 @@ from odoo.tests import tagged from odoo.tests.common import TransactionCase -import unittest from odoo.addons.base.tests.common import HttpCaseWithUserPortal diff --git a/addons/website_sale/tests/test_website_sale_combo_configurator.py b/addons/website_sale/tests/test_website_sale_combo_configurator.py index c7243dc8c26a2..eadfafa5f91da 100644 --- a/addons/website_sale/tests/test_website_sale_combo_configurator.py +++ b/addons/website_sale/tests/test_website_sale_combo_configurator.py @@ -2,7 +2,6 @@ from odoo.fields import Command from odoo.tests import HttpCase, tagged -import unittest from odoo.addons.website_sale.tests.common import WebsiteSaleCommon diff --git a/addons/website_sale/tests/test_website_sale_gmc.py b/addons/website_sale/tests/test_website_sale_gmc.py index c75395018bfee..ed3f2fb2e0822 100644 --- a/addons/website_sale/tests/test_website_sale_gmc.py +++ b/addons/website_sale/tests/test_website_sale_gmc.py @@ -7,7 +7,6 @@ from odoo import Command from odoo.tests import HttpCase, tagged -import unittest from odoo.addons.website_sale.tests.common import MockRequest from odoo.addons.website_sale.tests.common_gmc import WebsiteSaleGMCCommon diff --git a/addons/website_sale/tests/test_website_sale_mail.py b/addons/website_sale/tests/test_website_sale_mail.py index 4cd7141abc0a0..f1fd4d88e0afd 100644 --- a/addons/website_sale/tests/test_website_sale_mail.py +++ b/addons/website_sale/tests/test_website_sale_mail.py @@ -6,7 +6,6 @@ from odoo import SUPERUSER_ID, fields from odoo.tests import HttpCase, tagged -import unittest from odoo.addons.mail.tests.common import MailCommon from odoo.addons.website_sale.tests.common import WebsiteSaleCommon diff --git a/addons/website_sale_collect/tests/test_click_and_collect_flow.py b/addons/website_sale_collect/tests/test_click_and_collect_flow.py index 55d4628f0f720..b849740879fd2 100644 --- a/addons/website_sale_collect/tests/test_click_and_collect_flow.py +++ b/addons/website_sale_collect/tests/test_click_and_collect_flow.py @@ -1,7 +1,6 @@ # Part of Odoo. See LICENSE file for full copyright and licensing details. from odoo.tests import tagged -import unittest from odoo.tests.common import HttpCase from odoo.addons.website_sale_collect.tests.common import ClickAndCollectCommon diff --git a/addons/website_sale_comparison/tests/test_website_sale_comparison.py b/addons/website_sale_comparison/tests/test_website_sale_comparison.py index 4f0a365e426a1..177a493273e27 100644 --- a/addons/website_sale_comparison/tests/test_website_sale_comparison.py +++ b/addons/website_sale_comparison/tests/test_website_sale_comparison.py @@ -2,7 +2,6 @@ import logging from collections import OrderedDict -import unittest from lxml import etree diff --git a/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py b/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py index efbc805a39181..19fe572e3211a 100644 --- a/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py +++ b/addons/website_sale_loyalty/tests/test_shop_sale_coupon.py @@ -6,7 +6,6 @@ from odoo.exceptions import ValidationError from odoo.fields import Command from odoo.tests import HttpCase, tagged -import unittest from odoo.addons.sale.tests.common import TestSaleCommon from odoo.addons.website_sale.tests.common import MockRequest, WebsiteSaleCommon diff --git a/addons/website_sale_loyalty/tests/test_website_sale_loyalty_delivery.py b/addons/website_sale_loyalty/tests/test_website_sale_loyalty_delivery.py index ac3eed0c38e58..a2374e51d3a75 100644 --- a/addons/website_sale_loyalty/tests/test_website_sale_loyalty_delivery.py +++ b/addons/website_sale_loyalty/tests/test_website_sale_loyalty_delivery.py @@ -2,7 +2,6 @@ from odoo.fields import Command from odoo.tests import HttpCase, tagged -import unittest from odoo.addons.base.tests.common import DISABLED_MAIL_CONTEXT from odoo.addons.website_sale.tests.common import MockRequest, WebsiteSaleCommon diff --git a/addons/website_sale_stock/tests/test_website_sale_stock_configurators.py b/addons/website_sale_stock/tests/test_website_sale_stock_configurators.py index 39581c80345a5..f8cdf0168fb55 100644 --- a/addons/website_sale_stock/tests/test_website_sale_stock_configurators.py +++ b/addons/website_sale_stock/tests/test_website_sale_stock_configurators.py @@ -2,7 +2,6 @@ from odoo.fields import Command from odoo.tests import HttpCase, tagged -import unittest from odoo.addons.website_sale_stock.tests.common import WebsiteSaleStockCommon diff --git a/addons/website_sale_stock/tests/test_website_sale_stock_multilang.py b/addons/website_sale_stock/tests/test_website_sale_stock_multilang.py index 035fa11adcdce..281db4d7ac61b 100644 --- a/addons/website_sale_stock/tests/test_website_sale_stock_multilang.py +++ b/addons/website_sale_stock/tests/test_website_sale_stock_multilang.py @@ -4,7 +4,6 @@ from odoo.fields import Command from odoo.tests import tagged from odoo.tests.common import HttpCase -import unittest @tagged('post_install', '-at_install') diff --git a/addons/website_sale_stock/tests/test_website_sale_stock_reorder_from_portal.py b/addons/website_sale_stock/tests/test_website_sale_stock_reorder_from_portal.py index 9104fbb946026..00cac0f16860d 100644 --- a/addons/website_sale_stock/tests/test_website_sale_stock_reorder_from_portal.py +++ b/addons/website_sale_stock/tests/test_website_sale_stock_reorder_from_portal.py @@ -4,7 +4,6 @@ from odoo import Command from odoo.tests import tagged from odoo.tests.common import HttpCase -import unittest from odoo.addons.website_sale_stock.tests.common import WebsiteSaleStockCommon diff --git a/addons/website_sale_stock/tests/test_website_sale_stock_stock_message.py b/addons/website_sale_stock/tests/test_website_sale_stock_stock_message.py index 0024e8f5f9569..8172ef9c6908a 100644 --- a/addons/website_sale_stock/tests/test_website_sale_stock_stock_message.py +++ b/addons/website_sale_stock/tests/test_website_sale_stock_stock_message.py @@ -5,7 +5,6 @@ from odoo.addons.sale.tests.product_configurator_common import TestProductConfiguratorCommon from odoo.addons.base.tests.common import HttpCaseWithUserPortal from odoo.addons.website.tests.common import HttpCaseWithWebsiteUser -import unittest @tagged('post_install', '-at_install') class TestWebsiteSaleStockProductConfigurator(TestProductConfiguratorCommon, HttpCaseWithUserPortal, HttpCaseWithWebsiteUser): diff --git a/addons/website_sale_stock/tests/test_website_sale_stock_stock_notification.py b/addons/website_sale_stock/tests/test_website_sale_stock_stock_notification.py index 44df18639246d..f4ef41fe7c90a 100644 --- a/addons/website_sale_stock/tests/test_website_sale_stock_stock_notification.py +++ b/addons/website_sale_stock/tests/test_website_sale_stock_stock_notification.py @@ -3,7 +3,6 @@ from odoo.tests import tagged from odoo.tests.common import HttpCase -import unittest @tagged('post_install', '-at_install') class TestStockNotificationProduct(HttpCase): diff --git a/addons/website_sale_stock_wishlist/tests/test_website_sale_stock_wishlist_stock_notification.py b/addons/website_sale_stock_wishlist/tests/test_website_sale_stock_wishlist_stock_notification.py index 152281f749621..0870ce0009814 100644 --- a/addons/website_sale_stock_wishlist/tests/test_website_sale_stock_wishlist_stock_notification.py +++ b/addons/website_sale_stock_wishlist/tests/test_website_sale_stock_wishlist_stock_notification.py @@ -2,7 +2,6 @@ from odoo.tests import tagged from odoo.addons.website.tests.common import HttpCaseWithWebsiteUser -import unittest @tagged('post_install', '-at_install') From b7013884532e78be8dde6a1f87cf1a04952c56c8 Mon Sep 17 00:00:00 2001 From: fdardenne Date: Wed, 14 May 2025 10:33:06 +0200 Subject: [PATCH 182/240] [REF] html_builder: highlight: use classes instead of dataset During the highlight refactoring, we've decided to refactor highlight classes (`o_text_highlight`, `o_text_highlight_{id}`) into dataset (`data-highlight-text: highlightId`). This decision has been made because before formatting the selection, the format plugin split the selection and unformat all inline node until a class is encountered. A hardcoded exception was made for the font classes formatting. This commit allows plugin to indicate with a resources which classes can be splittable. Which avoid a migration script for text highlight --- .../highlight/highlight_configurator.xml | 2 +- .../plugins/highlight/highlight_picker.js | 11 ++++++-- .../plugins/highlight/highlight_picker.xml | 2 +- .../plugins/highlight/highlight_plugin.js | 26 ++++++++--------- .../static/src/core/format_plugin.js | 28 ++++++++++--------- .../static/src/main/font/font_plugin.js | 3 ++ .../src/interactions/text_highlights.js | 4 +-- .../website/static/src/js/highlight_utils.js | 10 +++++-- .../static/src/scss/website_common.scss | 2 +- .../tests/interactions/text_highlight.test.js | 6 ++-- 10 files changed, 54 insertions(+), 40 deletions(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.xml b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.xml index 80b37b31c4504..f79188e83f372 100644 --- a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.xml +++ b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_configurator.xml @@ -23,7 +23,7 @@
- Text + Text
diff --git a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_picker.js b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_picker.js index 61d8433534358..d067d8f3cd685 100644 --- a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_picker.js +++ b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_picker.js @@ -1,5 +1,9 @@ import { onMounted, useRef, Component, onWillDestroy } from "@odoo/owl"; -import { applyTextHighlight, textHighlightFactory } from "@website/js/highlight_utils"; +import { + applyTextHighlight, + textHighlightFactory, + getCurrentTextHighlight, +} from "@website/js/highlight_utils"; export class HighlightPicker extends Component { static template = "website.highlightPicker"; @@ -12,8 +16,9 @@ export class HighlightPicker extends Component { setup() { const root = useRef("root"); onMounted(() => { - for (const textEl of root.el.querySelectorAll("[data-highlight-text]")) { - applyTextHighlight(textEl, textEl.dataset.highlightText); + for (const textEl of root.el.querySelectorAll(".o_text_highlight")) { + const highlightId = getCurrentTextHighlight(textEl); + applyTextHighlight(textEl, highlightId); } }); diff --git a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_picker.xml b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_picker.xml index 0dcc988aca455..8d015925dd0bd 100644 --- a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_picker.xml +++ b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_picker.xml @@ -10,7 +10,7 @@ t-on-mouseenter="() => this.props.previewHighlight(highlight)" t-on-mouseleave="() => this.props.revertHighlight()">
- Text + Text
diff --git a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_plugin.js b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_plugin.js index 02ca290f4e33b..104928c5bd31d 100644 --- a/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/highlight/highlight_plugin.js @@ -11,6 +11,7 @@ import { closestElement } from "@html_editor/utils/dom_traversal"; import { removeStyle } from "@html_editor/utils/dom"; import { isTextNode } from "@html_editor/utils/dom_info"; import { omit } from "@web/core/utils/objects"; +import { getCurrentTextHighlight } from "@website/js/highlight_utils"; export class HighlightPlugin extends Plugin { static id = "highlight"; @@ -49,11 +50,12 @@ export class HighlightPlugin extends Plugin { normalize_handlers: (root) => { // Remove highlight SVGs when the text is removed. for (const svg of root.querySelectorAll(".o_text_highlight_svg")) { - if (!svg.closest("[data-highlight-text]")) { + if (!svg.closest(".o_text_highlight")) { svg.remove(); } } }, + format_splittable_class: (className) => className.startsWith("o_text_highlight"), selectionchange_handlers: this.updateSelectedHighlight.bind(this), }; @@ -80,7 +82,7 @@ export class HighlightPlugin extends Plugin { if (!el) { return; } - this.highlightState.highlightId = el.dataset.highlightText; + this.highlightState.highlightId = getCurrentTextHighlight(el); if (this.highlightState.highlightId) { const style = getComputedStyle(el); this.highlightState.color = style.getPropertyValue("--text-highlight-color"); @@ -95,7 +97,7 @@ export class HighlightPlugin extends Plugin { .getTraversedNodes() .map((n) => { const el = n.nodeType === Node.ELEMENT_NODE ? n : n.parentElement; - return el.closest("[data-highlight-text]"); + return el.closest(".o_text_highlight"); }) .filter(Boolean) ); @@ -127,7 +129,7 @@ export class HighlightPlugin extends Plugin { .getTraversedNodes() .map((n) => { const el = n.nodeType === Node.ELEMENT_NODE ? n : n.parentElement; - return el.closest("[data-highlight-text]"); + return el.closest(".o_text_highlight"); }) .filter(Boolean) ); @@ -151,20 +153,16 @@ registry.category("website-plugins").add(HighlightPlugin.id, HighlightPlugin); // Todo: formatsSpecs should allow to be register new formats through resources. formatsSpecs.highlight = { - isFormatted: (node) => { - const ret = !!closestElement(node)?.getAttribute("data-highlight-text"); - return ret; - }, - hasStyle: (node) => { - const ret = closestElement(node)?.getAttribute("data-highlight-text"); - return ret; - }, + isFormatted: (node) => closestElement(node)?.classList.contains("o_text_highlight"), + hasStyle: (node) => closestElement(node)?.classList.contains("o_text_highlight"), addStyle: (node, { highlightId }) => { node.dispatchEvent(new Event("text_highlight_added", { bubbles: true })); - node.setAttribute("data-highlight-text", highlightId); + node.classList.add("o_text_highlight", `o_text_highlight_${highlightId}`); }, removeStyle: (node) => { - node.removeAttribute("data-highlight-text"); + node.classList.remove( + ...[...node.classList].filter((cls) => cls.startsWith("o_text_highlight")) + ); removeStyle(node, "--text-highlight-width"); removeStyle(node, "--text-highlight-color"); }, diff --git a/addons/html_editor/static/src/core/format_plugin.js b/addons/html_editor/static/src/core/format_plugin.js index 04fb40f6aa6ee..dce1ea6327707 100644 --- a/addons/html_editor/static/src/core/format_plugin.js +++ b/addons/html_editor/static/src/core/format_plugin.js @@ -1,11 +1,15 @@ +import { prepareUpdate } from "@html_editor/utils/dom_state"; +import { withSequence } from "@html_editor/utils/resource"; +import { callbacksForCursorUpdate } from "@html_editor/utils/selection"; +import { _t } from "@web/core/l10n/translation"; import { Plugin } from "../plugin"; import { closestBlock, isBlock } from "../utils/blocks"; -import { cleanTextNode, splitTextNode, unwrapContents, fillEmpty } from "../utils/dom"; +import { cleanTextNode, fillEmpty, splitTextNode, unwrapContents } from "../utils/dom"; import { areSimilarElements, isContentEditable, - isEmptyTextNode, isEmptyBlock, + isEmptyTextNode, isSelfClosingElement, isTextNode, isVisibleTextNode, @@ -13,20 +17,16 @@ import { isZWS, previousLeaf, } from "../utils/dom_info"; +import { isFakeLineBreak } from "../utils/dom_state"; import { childNodes, closestElement, descendants, - selectElements, findFurthest, + selectElements, } from "../utils/dom_traversal"; -import { FONT_SIZE_CLASSES, formatsSpecs } from "../utils/formatting"; +import { formatsSpecs } from "../utils/formatting"; import { boundariesIn, boundariesOut, DIRECTIONS, leftPos, rightPos } from "../utils/position"; -import { prepareUpdate } from "@html_editor/utils/dom_state"; -import { _t } from "@web/core/l10n/translation"; -import { callbacksForCursorUpdate } from "@html_editor/utils/selection"; -import { withSequence } from "@html_editor/utils/resource"; -import { isFakeLineBreak } from "../utils/dom_state"; const allWhitespaceRegex = /^[\s\u200b]*$/; @@ -289,15 +289,17 @@ export class FormatPlugin extends Plugin { let parentNode = node.parentElement; // Remove the format on all inline ancestors until a block or an element - // with a class that is not related to font size (in case the formatting - // comes from the class). + // with a class that is not indicated as splittable. + const isClassListSplittable = (classList) => + [...classList].every((className) => + this.getResource("format_splittable_class").some((cb) => cb(className)) + ); while ( parentNode && !isBlock(parentNode) && !this.dependencies.split.isUnsplittable(parentNode) && - (parentNode.classList.length === 0 || - [...parentNode.classList].every((cls) => FONT_SIZE_CLASSES.includes(cls))) + (parentNode.classList.length === 0 || isClassListSplittable(parentNode.classList)) ) { const isUselessZws = parentNode.tagName === "SPAN" && diff --git a/addons/html_editor/static/src/main/font/font_plugin.js b/addons/html_editor/static/src/main/font/font_plugin.js index d688ee85b8e08..6365e23ae49a6 100644 --- a/addons/html_editor/static/src/main/font/font_plugin.js +++ b/addons/html_editor/static/src/main/font/font_plugin.js @@ -20,6 +20,7 @@ import { getCSSVariableValue, getHtmlStyle, getFontSizeDisplayValue, + FONT_SIZE_CLASSES, } from "@html_editor/utils/formatting"; import { DIRECTIONS } from "@html_editor/utils/position"; import { _t } from "@web/core/l10n/translation"; @@ -279,6 +280,8 @@ export class FontPlugin extends Plugin { /** Processors */ clipboard_content_processors: this.processContentForClipboard.bind(this), + + format_splittable_class: (className) => FONT_SIZE_CLASSES.includes(className), }; setup() { diff --git a/addons/website/static/src/interactions/text_highlights.js b/addons/website/static/src/interactions/text_highlights.js index b76df4508f4b4..06aea987e910d 100644 --- a/addons/website/static/src/interactions/text_highlights.js +++ b/addons/website/static/src/interactions/text_highlights.js @@ -18,7 +18,7 @@ export class TextHighlight extends Interaction { } start() { - for (const textEl of this.el.querySelectorAll("[data-highlight-text]")) { + for (const textEl of this.el.querySelectorAll(".o_text_highlight")) { this.handleEl(textEl); } } @@ -51,7 +51,7 @@ export class TextHighlight extends Interaction { closestToObserves.add(this.closestToObserve(target)); } for (const closestToObserve of closestToObserves) { - for (const el of closestToObserve.querySelectorAll("[data-highlight-text]")) { + for (const el of closestToObserve.querySelectorAll(".o_text_highlight")) { switchTextHighlight(el); } } diff --git a/addons/website/static/src/js/highlight_utils.js b/addons/website/static/src/js/highlight_utils.js index 4a1feef6e24f8..686daa9f59ab8 100644 --- a/addons/website/static/src/js/highlight_utils.js +++ b/addons/website/static/src/js/highlight_utils.js @@ -388,8 +388,14 @@ function buildPath(templates, options) { * @param {HTMLElement} el * @returns {String} */ -function getCurrentTextHighlight(el) { - return el.closest("[data-highlight-text]").getAttribute("data-highlight-text"); +export function getCurrentTextHighlight(el) { + const highlightEl = el.closest(".o_text_highlight"); + if (!highlightEl) { + return; + } + return Array.from(highlightEl.classList) + .find((cls) => cls.startsWith("o_text_highlight_")) + ?.replace("o_text_highlight_", ""); } function rectToBatch(rects) { if (!rects.length) { diff --git a/addons/website/static/src/scss/website_common.scss b/addons/website/static/src/scss/website_common.scss index 44a39bc074274..00bf8560da4c1 100644 --- a/addons/website/static/src/scss/website_common.scss +++ b/addons/website/static/src/scss/website_common.scss @@ -2,7 +2,7 @@ // Website Text Highlight Effects //------------------------------------------------------------------------------ -[data-highlight-text] { +.o_text_highlight { position: relative; --text-highlight-color: currentColor; isolation: isolate; diff --git a/addons/website/static/tests/interactions/text_highlight.test.js b/addons/website/static/tests/interactions/text_highlight.test.js index d4e2420653d43..1f2791b99ad88 100644 --- a/addons/website/static/tests/interactions/text_highlight.test.js +++ b/addons/website/static/tests/interactions/text_highlight.test.js @@ -13,7 +13,7 @@ describe.current.tags("interaction_dev"); const highlightTemplate = `

Great stories have a personality. - + Consider telling a great story that provides personality. @@ -35,14 +35,14 @@ test("[resize] update the number of highlight items when necessary", async () => // Ensure the update is finished await animationFrame(); await animationFrame(); - const numberOfItems1 = queryAll("[data-highlight-text] svg").length; + const numberOfItems1 = queryAll(".o_text_highlight svg").length; queryFirst("div").style.width = "200px"; // Ensure the update is finished await animationFrame(); await animationFrame(); - const numberOfItems2 = queryAll("[data-highlight-text] svg").length; + const numberOfItems2 = queryAll(".o_text_highlight svg").length; expect(numberOfItems1).toBeLessThan(numberOfItems2); }); From f43bf5bd2ea0778fa6e58cc396f4bb0e54ed1b30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20=28blse=29?= Date: Wed, 14 May 2025 15:11:59 +0200 Subject: [PATCH 183/240] Select current website when adding a new language from the theme tab --- .../website_builder/plugins/customize_website_plugin.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/customize_website_plugin.js b/addons/html_builder/static/src/website_builder/plugins/customize_website_plugin.js index 74978a66aa25d..be35f7febc928 100644 --- a/addons/html_builder/static/src/website_builder/plugins/customize_website_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/customize_website_plugin.js @@ -171,8 +171,12 @@ export class CustomizeWebsitePlugin extends Plugin { await this.dependencies.savePlugin.save(/* not in translation */); // TODO doAction in savePlugin.save ? await this.services.action.doAction("base.action_view_base_language_install", { - website_id: websiteId, - url_return: "[land]", + additionalContext: { + params: { + website_id: websiteId, + url_return: "[lang]", + }, + }, onClose: def.resolve, }); return def; From 10c8ce6858756d22d3155fa6d7b013f4ba60b5b8 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Wed, 14 May 2025 16:08:45 +0200 Subject: [PATCH 184/240] empty field with placeholder should be editable --- .../html_builder/static/src/core/editor.inside.scss | 11 +++++++++++ .../static/src/core/setup_editor_plugin.js | 4 +++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/addons/html_builder/static/src/core/editor.inside.scss b/addons/html_builder/static/src/core/editor.inside.scss index df8b49822fdc3..8e90472460bb6 100644 --- a/addons/html_builder/static/src/core/editor.inside.scss +++ b/addons/html_builder/static/src/core/editor.inside.scss @@ -33,6 +33,17 @@ $-editor-messages-margin-x: 2%; // This style block is about the "editor message" which highlights the areas // where the user can drag & drop snippets. .o_editable { + // Summernote did not Support for placeholder text, guess who else does not... + &[placeholder]:not(:focus) { + &:empty:before, + &:has(br:only-child):before, + &[data-oe-zws-empty-inline]:before { + content: attr(placeholder); + opacity: 0.3; + pointer-events: none; + } + } + &.oe_structure.oe_empty, &[data-oe-type=html], .oe_structure.oe_empty { // Base case (website.page (#wrap), t-field (product description), ...) diff --git a/addons/html_builder/static/src/core/setup_editor_plugin.js b/addons/html_builder/static/src/core/setup_editor_plugin.js index e9d35850387cf..1b637596e2088 100644 --- a/addons/html_builder/static/src/core/setup_editor_plugin.js +++ b/addons/html_builder/static/src/core/setup_editor_plugin.js @@ -82,7 +82,9 @@ export class SetupEditorPlugin extends Plugin { setContenteditable(root = this.editable) { // TODO: Should be imp, we need to check _getReadOnlyAreas etc const editableEls = this.getEditableElements(".o_editable"); - editableEls.forEach((el) => el.setAttribute("contenteditable", !el.matches(":empty"))); + editableEls.forEach((el) => + el.setAttribute("contenteditable", !el.matches(":empty:not([placeholder])")) + ); const uneditableEls = root.querySelectorAll(".o_not_editable"); uneditableEls.forEach((el) => el.setAttribute("contenteditable", false)); From 1b465e87fe0ef7806dd713223b403e44df443b03 Mon Sep 17 00:00:00 2001 From: Sanjay Sharma Date: Fri, 25 Apr 2025 17:23:48 +0530 Subject: [PATCH 185/240] [IMP] website: adapt snippet-image-gallery tour --- .../tests/tours/snippet_image_gallery.js | 24 +++++++++---------- addons/website/tests/test_snippets.py | 1 - 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/addons/website/static/tests/tours/snippet_image_gallery.js b/addons/website/static/tests/tours/snippet_image_gallery.js index e87bd568d5f67..70fb3620eda62 100644 --- a/addons/website/static/tests/tours/snippet_image_gallery.js +++ b/addons/website/static/tests/tours/snippet_image_gallery.js @@ -5,6 +5,7 @@ import { clickOnSnippet, insertSnippet, registerWebsitePreviewTour, + changeOptionInPopover, } from '@website/js/tours/tour_utils'; registerWebsitePreviewTour('snippet_image_gallery', { @@ -84,16 +85,13 @@ registerWebsitePreviewTour("snippet_image_gallery_reorder", { trigger: ":iframe .s_image_gallery .carousel-item.active img", run: "click", }, - changeOption('ImageTools', 'we-select:contains("Filter") we-toggler'), - changeOption('ImageTools', '[data-gl-filter="blur"]'), + ...changeOptionInPopover("Image", "Filter", "Blur"), { content: "Check that the image has the correct filter", - trigger: ".snippet-option-ImageTools we-select:contains('Filter') we-toggler:contains('Blur')", -}, { - content: "Click on move to next", - trigger: ".snippet-option-GalleryElement we-button[data-position='next']", - run: "click", -}, { + trigger: ".o_customize_tab [data-container-title='Image'] [data-label='Filter'] .o-dropdown:contains('Blur')", +}, +changeOption("Image", "[data-label='Re-order'] button[data-action-value='next']"), +{ content: "Check that the image has been moved", trigger: ":iframe .s_image_gallery .carousel-item.active img[data-index='1']", }, { @@ -102,28 +100,28 @@ registerWebsitePreviewTour("snippet_image_gallery_reorder", { run: "click", }, { content: "Check that the footer options have been loaded", - trigger: ".snippet-option-HideFooter we-button:contains('Page Visibility')", + trigger:".o-tab-content [data-container-title='Footer']", }, { content: "Click on the moved image", - trigger: ":iframe .s_image_gallery .carousel-item.active img[data-index='1'][data-gl-filter='blur']", + trigger: ":iframe .s_image_gallery .carousel-item.active img", run: "click", }, { content: "Check that the image still has the correct filter", - trigger: ".snippet-option-ImageTools we-select:contains('Filter') we-toggler:contains('Blur')", + trigger: ".o_customize_tab [data-container-title='Image'] [data-label='Filter'] .o-dropdown:contains('Blur')", }, { content: "Click to access next image", trigger: ":iframe .s_image_gallery .carousel-control-next", run: "click", }, { content: "Check that the option has changed", - trigger: ".snippet-option-ImageTools we-select:contains('Filter') we-toggler:not(:contains('Blur'))", + trigger: ".o_customize_tab [data-container-title='Image'] [data-label='Filter'] .o-dropdown:contains('None')", }, { content: "Click to access previous image", trigger: ":iframe .s_image_gallery .carousel-control-prev", run: "click", }, { content: "Check that the option is restored", - trigger: ".snippet-option-ImageTools we-select:contains('Filter') we-toggler:contains('Blur')", + trigger: ".o_customize_tab [data-container-title='Image'] [data-label='Filter'] .o-dropdown:contains('Blur')", }]); registerWebsitePreviewTour("snippet_image_gallery_thumbnail_update", { diff --git a/addons/website/tests/test_snippets.py b/addons/website/tests/test_snippets.py index cb4c10cc48c52..e851d5e2ff74e 100644 --- a/addons/website/tests/test_snippets.py +++ b/addons/website/tests/test_snippets.py @@ -130,7 +130,6 @@ def test_snippet_popup_with_scrollbar_and_animations(self): def test_drag_and_drop_on_non_editable(self): self.start_tour(self.env['website'].get_client_action_url('/'), 'test_drag_and_drop_on_non_editable', login='admin') - @unittest.skip def test_snippet_image_gallery_reorder(self): self.start_tour(self.env['website'].get_client_action_url('/'), "snippet_image_gallery_reorder", login='admin') From b87f5849ceae5e6ea63979e455899fb990b37754 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Mon, 12 May 2025 16:53:53 +0200 Subject: [PATCH 186/240] top menu visibility after header scroll effect --- .../src/website_builder/plugins/form/form_field_option.js | 1 - .../plugins/options/website_page_config_option_plugin.js | 5 +++-- .../static/tests/options/top_menu_visibility_option.test.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_field_option.js b/addons/html_builder/static/src/website_builder/plugins/form/form_field_option.js index 1fba0c117f9ba..32fc634c13fee 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_field_option.js +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_field_option.js @@ -35,7 +35,6 @@ export class FormFieldOption extends BaseOptionComponent { onWillStart(async () => { const el = this.env.getEditingElement(); const fieldOptionData = await this.props.loadFieldOptionData(el); - console.log(38, fieldOptionData); this.state.availableFields.push(...fieldOptionData.availableFields); this.state.conditionInputs.push(...fieldOptionData.conditionInputs); this.state.valueList = fieldOptionData.valueList; diff --git a/addons/html_builder/static/src/website_builder/plugins/options/website_page_config_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/website_page_config_option_plugin.js index 6858cde163c0f..e7d6742d1befe 100644 --- a/addons/html_builder/static/src/website_builder/plugins/options/website_page_config_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/options/website_page_config_option_plugin.js @@ -1,11 +1,12 @@ -import { after, SNIPPET_SPECIFIC_NEXT } from "@html_builder/utils/option_sequence"; +import { after } from "@html_builder/utils/option_sequence"; import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; import { rgbToHex } from "@web/core/utils/colors"; import { withSequence } from "@html_editor/utils/resource"; import { FOOTER_SCROLL_TO } from "./footer_option_plugin"; +import { HEADER_SCROLL_EFFECT } from "./header_option_plugin"; -export const TOP_MENU_VISIBILITY = SNIPPET_SPECIFIC_NEXT; +export const TOP_MENU_VISIBILITY = after(HEADER_SCROLL_EFFECT); export const HIDE_FOOTER = after(FOOTER_SCROLL_TO); class WebsitePageConfigOptionPlugin extends Plugin { diff --git a/addons/html_builder/static/tests/options/top_menu_visibility_option.test.js b/addons/html_builder/static/tests/options/top_menu_visibility_option.test.js index 0a1c08ab7f46a..5cfacf5409a55 100644 --- a/addons/html_builder/static/tests/options/top_menu_visibility_option.test.js +++ b/addons/html_builder/static/tests/options/top_menu_visibility_option.test.js @@ -66,7 +66,7 @@ test("undo and comeback to a custom overTheContent color", async () => { await contains(":iframe #wrapwrap > header").click(); await contains("[data-label='Header Position'] .dropdown").click(); await contains("[data-action-value='overTheContent']").click(); - await contains("[data-label='Background'] .o_we_color_preview").click(); + await contains("[data-label='Background'].o_we_sublevel_1 .o_we_color_preview").click(); await contains("[data-color='600']").click(); const precedentWrapwrap = queryOne(":iframe #wrapwrap").outerHTML; await contains("[data-label='Header Position'] .dropdown").click(); From 9af2c24b712bcfc0b6c692098aab5518cfdee431 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Tue, 13 May 2025 10:31:22 +0200 Subject: [PATCH 187/240] have auto_hide_menu be ignored by current builder history --- addons/website/__manifest__.py | 1 + .../website/static/src/core/website_edit_service.js | 3 +++ .../website/static/src/js/content/auto_hide_menu.js | 13 +++++++------ 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py index 45e4bf8e19add..b70fa0b08b0ef 100644 --- a/addons/website/__manifest__.py +++ b/addons/website/__manifest__.py @@ -331,6 +331,7 @@ 'web/static/src/legacy/js/public/public_widget.js', 'web/static/src/legacy/js/public/public_root.js', 'website/static/lib/multirange/*.js', + 'website/static/src/js/content/auto_hide_menu.js', 'website/static/src/core/**/*', 'website/static/src/utils/**/*', 'website/static/src/interactions/**/*', diff --git a/addons/website/static/src/core/website_edit_service.js b/addons/website/static/src/core/website_edit_service.js index 8940507b2b6cc..73b9dce4df5cc 100644 --- a/addons/website/static/src/core/website_edit_service.js +++ b/addons/website/static/src/core/website_edit_service.js @@ -3,6 +3,7 @@ import { PublicRoot } from "@web/legacy/js/public/public_root"; import { Colibri } from "@web/public/colibri"; import { Interaction } from "@web/public/interaction"; import { patch } from "@web/core/utils/patch"; +import { setupIgnoreDOMMutations } from "@website/js/content/auto_hide_menu"; export function buildEditableInteractions(builders) { const result = []; @@ -221,6 +222,7 @@ registry.category("services").add("website_edit", { removePatch(); } patches.length = 0; + setupIgnoreDOMMutations(null); }; const applyAction = (actionId, spec) => { shared.builderActions.applyAction(actionId, spec); @@ -262,6 +264,7 @@ registry.category("services").add("website_edit", { ); Object.assign(shared, ev.shared); historyCallbacks.ignoreDOMMutations = shared.history.ignoreDOMMutations; + setupIgnoreDOMMutations(shared.history.ignoreDOMMutations); }); return websiteEditService; diff --git a/addons/website/static/src/js/content/auto_hide_menu.js b/addons/website/static/src/js/content/auto_hide_menu.js index 5779481e9dfec..c0da13193c368 100644 --- a/addons/website/static/src/js/content/auto_hide_menu.js +++ b/addons/website/static/src/js/content/auto_hide_menu.js @@ -1,5 +1,10 @@ const BREAKPOINT_SIZES = {sm: '575', md: '767', lg: '991', xl: '1199', xxl: '1399'}; +let ignoreDOMMutations; +export function setupIgnoreDOMMutations(fn) { + ignoreDOMMutations = fn; +} + /** * Creates an automatic 'more' dropdown-menu for a set of navbar items. * @@ -110,12 +115,8 @@ async function autoHideMenu(el, options) { } function _adapt() { - const wysiwyg = window.$ && $('#wrapwrap').data('wysiwyg'); - const odooEditor = wysiwyg && wysiwyg.odooEditor; - if (odooEditor) { - odooEditor.observerUnactive("adapt"); - odooEditor.withoutRollback(__adapt); - odooEditor.observerActive("adapt"); + if (ignoreDOMMutations) { + ignoreDOMMutations(__adapt); return; } __adapt(); From 1abfbcef22f6f8fc4bdeb29620b616bbf36f226d Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Tue, 13 May 2025 11:42:27 +0200 Subject: [PATCH 188/240] restore test --- addons/test_website/tests/test_systray.py | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/addons/test_website/tests/test_systray.py b/addons/test_website/tests/test_systray.py index 971148d47a860..0a2b64d448a4c 100644 --- a/addons/test_website/tests/test_systray.py +++ b/addons/test_website/tests/test_systray.py @@ -6,8 +6,6 @@ from odoo.addons.base.tests.common import HttpCase -import unittest - @tagged('post_install', '-at_install') class TestSystray(HttpCase): @@ -42,7 +40,7 @@ def test_01_admin(self): # TODO master-mysterious-egg fix error # need to convert auto_hide_menu.js - @unittest.skip("prepare mysterious-egg for merging") + @mute_logger('odoo.addons.http_routing.models.ir_http', 'odoo.http') def test_02_reditor_tester(self): self.user_test.group_ids |= self.group_restricted_editor From ac91efd26054df15f9d92dbadaa8e6c677cf7098 Mon Sep 17 00:00:00 2001 From: emge-odoo Date: Wed, 14 May 2025 16:49:00 +0200 Subject: [PATCH 189/240] close color picker on click after opened --- addons/web/static/src/core/color_picker/color_picker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/web/static/src/core/color_picker/color_picker.js b/addons/web/static/src/core/color_picker/color_picker.js index 54842bd67a5fc..dd9c9a63d9769 100644 --- a/addons/web/static/src/core/color_picker/color_picker.js +++ b/addons/web/static/src/core/color_picker/color_picker.js @@ -195,7 +195,7 @@ export function useColorPicker(refName, props, options = {}) { const root = useRef(refName); function onClick() { - colorPicker.open(root.el, props); + colorPicker.isOpen ? colorPicker.close() : colorPicker.open(root.el, props); } useEffect( From bbcbebeccf3d1088cb91befe6e68eff82c78eebc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Thu, 15 May 2025 10:00:33 +0200 Subject: [PATCH 190/240] move website builder action to website --- addons/html_builder/__manifest__.py | 5 ----- addons/html_builder/static/tests/builder_action.test.js | 2 +- addons/html_builder/static/tests/save.test.js | 2 +- addons/html_builder/static/tests/snippets_menu.test.js | 2 +- addons/html_builder/static/tests/translation.test.js | 4 ++-- addons/html_builder/static/tests/website_helpers.js | 4 ++-- addons/website/__manifest__.py | 1 + .../src/client_actions}/website_preview/edit_in_backend.js | 0 .../src/client_actions}/website_preview/edit_in_backend.xml | 0 .../website_preview/edit_website_systray_item.js | 0 .../website_preview/edit_website_systray_item.xml | 0 .../client_actions}/website_preview/install_module_dialog.js | 0 .../website_preview/install_module_dialog.xml | 0 .../website_preview/mobile_preview_systray.js | 0 .../website_preview/mobile_preview_systray.scss | 0 .../website_preview/mobile_preview_systray.xml | 0 .../client_actions}/website_preview/new_content_element.js | 0 .../client_actions}/website_preview/new_content_element.xml | 0 .../src/client_actions}/website_preview/new_content_modal.js | 4 ++-- .../client_actions}/website_preview/new_content_modal.xml | 0 .../website_preview/new_content_systray_item.js | 2 +- .../website_preview/new_content_systray_item.xml | 0 .../website_preview/publish_website_systray_item.js | 0 .../static/src/client_actions}/website_preview/utils.js | 0 .../website_preview/website_builder_action.editor.scss | 0 .../website_preview/website_builder_action.js | 0 .../website_preview/website_builder_action.scss | 0 .../website_preview/website_builder_action.xml | 0 .../website_preview/website_switcher_systray_item.js | 0 .../website_preview/website_switcher_systray_item.xml | 0 .../client_actions}/website_preview/website_systray_item.js | 0 .../client_actions}/website_preview/website_systray_item.xml | 0 addons/website/tests/test_website_reset_password.py | 1 - .../website_blog/static/src/js/systray_items/new_content.js | 4 ++-- .../website_event/static/src/js/systray_items/new_content.js | 4 ++-- .../website_forum/static/src/js/systray_items/new_content.js | 4 ++-- .../static/src/js/systray_items/new_content.js | 4 ++-- .../static/src/js/systray_items/new_content.js | 4 ++-- .../website_sale/static/src/js/systray_items/new_content.js | 4 ++-- .../static/src/js/components/edit_website_systray_item.js | 2 +- .../static/src/js/systray_items/new_content.js | 4 ++-- 41 files changed, 26 insertions(+), 31 deletions(-) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/edit_in_backend.js (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/edit_in_backend.xml (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/edit_website_systray_item.js (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/edit_website_systray_item.xml (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/install_module_dialog.js (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/install_module_dialog.xml (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/mobile_preview_systray.js (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/mobile_preview_systray.scss (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/mobile_preview_systray.xml (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/new_content_element.js (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/new_content_element.xml (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/new_content_modal.js (98%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/new_content_modal.xml (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/new_content_systray_item.js (87%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/new_content_systray_item.xml (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/publish_website_systray_item.js (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/utils.js (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/website_builder_action.editor.scss (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/website_builder_action.js (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/website_builder_action.scss (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/website_builder_action.xml (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/website_switcher_systray_item.js (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/website_switcher_systray_item.xml (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/website_systray_item.js (100%) rename addons/{html_builder/static/src => website/static/src/client_actions}/website_preview/website_systray_item.xml (100%) diff --git a/addons/html_builder/__manifest__.py b/addons/html_builder/__manifest__.py index 57683027dd8ed..edb3cbf8cd6b3 100644 --- a/addons/html_builder/__manifest__.py +++ b/addons/html_builder/__manifest__.py @@ -21,7 +21,6 @@ 'assets': { 'web.assets_backend': [ - 'html_builder/static/src/website_preview/**/*', 'website/static/src/xml/website_form_editor.xml', # TODO Remove the module's form js - this is for testing. 'website/static/src/js/send_mail_form.js', @@ -41,7 +40,6 @@ 'web/static/lib/bootstrap/scss/_maps.scss', 'html_builder/static/src/**/*', - ('remove', 'html_builder/static/src/website_preview/**/*'), ], 'html_builder.inside_builder_style': [ ('include', 'web._assets_helpers'), @@ -61,9 +59,6 @@ 'html_builder/static/tests/**/*', ('include', 'html_builder.assets'), ], - 'web.assets_frontend': [ - 'html_builder/static/src/website_preview/website_builder_action.editor.scss', - ], }, 'license': 'LGPL-3', } diff --git a/addons/html_builder/static/tests/builder_action.test.js b/addons/html_builder/static/tests/builder_action.test.js index 8bb90c1418a2d..cea3b80ea46b4 100644 --- a/addons/html_builder/static/tests/builder_action.test.js +++ b/addons/html_builder/static/tests/builder_action.test.js @@ -4,7 +4,7 @@ import { useState, xml } from "@odoo/owl"; import { contains, patchWithCleanup } from "@web/../tests/web_test_helpers"; import { defineWebsiteModels, setupWebsiteBuilder } from "./website_helpers"; import { BaseOptionComponent } from "@html_builder/core/utils"; -import { WebsiteBuilder } from "@html_builder/website_preview/website_builder_action"; +import { WebsiteBuilder } from "@website/client_actions/website_preview/website_builder_action"; import { addBuilderAction, addBuilderOption, diff --git a/addons/html_builder/static/tests/save.test.js b/addons/html_builder/static/tests/save.test.js index 0987ab717f54b..8865e7cafd365 100644 --- a/addons/html_builder/static/tests/save.test.js +++ b/addons/html_builder/static/tests/save.test.js @@ -1,4 +1,4 @@ -import { WebsiteBuilder } from "@html_builder/website_preview/website_builder_action"; +import { WebsiteBuilder } from "@website/client_actions/website_preview/website_builder_action"; import { expect, test } from "@odoo/hoot"; import { animationFrame, click } from "@odoo/hoot-dom"; import { contains, onRpc, patchWithCleanup } from "@web/../tests/web_test_helpers"; diff --git a/addons/html_builder/static/tests/snippets_menu.test.js b/addons/html_builder/static/tests/snippets_menu.test.js index 92debcb1dbee4..e3fcc978145cc 100644 --- a/addons/html_builder/static/tests/snippets_menu.test.js +++ b/addons/html_builder/static/tests/snippets_menu.test.js @@ -1,4 +1,4 @@ -import { WebsiteBuilder } from "@html_builder/website_preview/website_builder_action"; +import { WebsiteBuilder } from "@website/client_actions/website_preview/website_builder_action"; import { setContent } from "@html_editor/../tests/_helpers/selection"; import { insertText } from "@html_editor/../tests/_helpers/user_actions"; import { expect, test } from "@odoo/hoot"; diff --git a/addons/html_builder/static/tests/translation.test.js b/addons/html_builder/static/tests/translation.test.js index a41aa29366cee..78af1456a3439 100644 --- a/addons/html_builder/static/tests/translation.test.js +++ b/addons/html_builder/static/tests/translation.test.js @@ -1,6 +1,6 @@ import { Builder } from "@html_builder/builder"; -import { WebsiteBuilder } from "@html_builder/website_preview/website_builder_action"; -import { EditWebsiteSystrayItem } from "@html_builder/website_preview/edit_website_systray_item"; +import { WebsiteBuilder } from "@website/client_actions/website_preview/website_builder_action"; +import { EditWebsiteSystrayItem } from "@website/client_actions/website_preview/edit_website_systray_item"; import { setContent, setSelection } from "@html_editor/../tests/_helpers/selection"; import { insertText } from "@html_editor/../tests/_helpers/user_actions"; import { expect, test } from "@odoo/hoot"; diff --git a/addons/html_builder/static/tests/website_helpers.js b/addons/html_builder/static/tests/website_helpers.js index 48d88870a98ef..29d734cde1197 100644 --- a/addons/html_builder/static/tests/website_helpers.js +++ b/addons/html_builder/static/tests/website_helpers.js @@ -3,8 +3,8 @@ import { SetupEditorPlugin } from "@html_builder/core/setup_editor_plugin"; import { VersionControlPlugin } from "@html_builder/core/version_control_plugin"; import { EditInteractionPlugin } from "@html_builder/website_builder/plugins/edit_interaction_plugin"; import { WebsiteSessionPlugin } from "@html_builder/website_builder/plugins/website_session_plugin"; -import { WebsiteBuilder } from "@html_builder/website_preview/website_builder_action"; -import { WebsiteSystrayItem } from "@html_builder/website_preview/website_systray_item"; +import { WebsiteBuilder } from "@website/client_actions/website_preview/website_builder_action"; +import { WebsiteSystrayItem } from "@website/client_actions/website_preview/website_systray_item"; import { setContent } from "@html_editor/../tests/_helpers/selection"; import { insertText } from "@html_editor/../tests/_helpers/user_actions"; import { Plugin } from "@html_editor/plugin"; diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py index b70fa0b08b0ef..fa6cd43d31b6e 100644 --- a/addons/website/__manifest__.py +++ b/addons/website/__manifest__.py @@ -245,6 +245,7 @@ 'website/static/src/xml/website.cookies_warning.xml', 'website/static/src/js/text_processing.js', 'website/static/src/js/highlight_utils.js', + 'website/static/src/client_actions/website_preview/website_builder_action.editor.scss', ], 'web.assets_frontend_minimal': [ 'website/static/src/utils/misc.js', diff --git a/addons/html_builder/static/src/website_preview/edit_in_backend.js b/addons/website/static/src/client_actions/website_preview/edit_in_backend.js similarity index 100% rename from addons/html_builder/static/src/website_preview/edit_in_backend.js rename to addons/website/static/src/client_actions/website_preview/edit_in_backend.js diff --git a/addons/html_builder/static/src/website_preview/edit_in_backend.xml b/addons/website/static/src/client_actions/website_preview/edit_in_backend.xml similarity index 100% rename from addons/html_builder/static/src/website_preview/edit_in_backend.xml rename to addons/website/static/src/client_actions/website_preview/edit_in_backend.xml diff --git a/addons/html_builder/static/src/website_preview/edit_website_systray_item.js b/addons/website/static/src/client_actions/website_preview/edit_website_systray_item.js similarity index 100% rename from addons/html_builder/static/src/website_preview/edit_website_systray_item.js rename to addons/website/static/src/client_actions/website_preview/edit_website_systray_item.js diff --git a/addons/html_builder/static/src/website_preview/edit_website_systray_item.xml b/addons/website/static/src/client_actions/website_preview/edit_website_systray_item.xml similarity index 100% rename from addons/html_builder/static/src/website_preview/edit_website_systray_item.xml rename to addons/website/static/src/client_actions/website_preview/edit_website_systray_item.xml diff --git a/addons/html_builder/static/src/website_preview/install_module_dialog.js b/addons/website/static/src/client_actions/website_preview/install_module_dialog.js similarity index 100% rename from addons/html_builder/static/src/website_preview/install_module_dialog.js rename to addons/website/static/src/client_actions/website_preview/install_module_dialog.js diff --git a/addons/html_builder/static/src/website_preview/install_module_dialog.xml b/addons/website/static/src/client_actions/website_preview/install_module_dialog.xml similarity index 100% rename from addons/html_builder/static/src/website_preview/install_module_dialog.xml rename to addons/website/static/src/client_actions/website_preview/install_module_dialog.xml diff --git a/addons/html_builder/static/src/website_preview/mobile_preview_systray.js b/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.js similarity index 100% rename from addons/html_builder/static/src/website_preview/mobile_preview_systray.js rename to addons/website/static/src/client_actions/website_preview/mobile_preview_systray.js diff --git a/addons/html_builder/static/src/website_preview/mobile_preview_systray.scss b/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.scss similarity index 100% rename from addons/html_builder/static/src/website_preview/mobile_preview_systray.scss rename to addons/website/static/src/client_actions/website_preview/mobile_preview_systray.scss diff --git a/addons/html_builder/static/src/website_preview/mobile_preview_systray.xml b/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.xml similarity index 100% rename from addons/html_builder/static/src/website_preview/mobile_preview_systray.xml rename to addons/website/static/src/client_actions/website_preview/mobile_preview_systray.xml diff --git a/addons/html_builder/static/src/website_preview/new_content_element.js b/addons/website/static/src/client_actions/website_preview/new_content_element.js similarity index 100% rename from addons/html_builder/static/src/website_preview/new_content_element.js rename to addons/website/static/src/client_actions/website_preview/new_content_element.js diff --git a/addons/html_builder/static/src/website_preview/new_content_element.xml b/addons/website/static/src/client_actions/website_preview/new_content_element.xml similarity index 100% rename from addons/html_builder/static/src/website_preview/new_content_element.xml rename to addons/website/static/src/client_actions/website_preview/new_content_element.xml diff --git a/addons/html_builder/static/src/website_preview/new_content_modal.js b/addons/website/static/src/client_actions/website_preview/new_content_modal.js similarity index 98% rename from addons/html_builder/static/src/website_preview/new_content_modal.js rename to addons/website/static/src/client_actions/website_preview/new_content_modal.js index b8de2f45becd9..a55cc3ac719de 100644 --- a/addons/html_builder/static/src/website_preview/new_content_modal.js +++ b/addons/website/static/src/client_actions/website_preview/new_content_modal.js @@ -1,8 +1,8 @@ -import { InstallModuleDialog } from "@html_builder/website_preview/install_module_dialog"; +import { InstallModuleDialog } from "./install_module_dialog"; import { MODULE_STATUS, NewContentElement, -} from "@html_builder/website_preview/new_content_element"; +} from "./new_content_element"; import { Component, onWillStart, useState, xml } from "@odoo/owl"; import { useHotkey } from "@web/core/hotkeys/hotkey_hook"; import { _t } from "@web/core/l10n/translation"; diff --git a/addons/html_builder/static/src/website_preview/new_content_modal.xml b/addons/website/static/src/client_actions/website_preview/new_content_modal.xml similarity index 100% rename from addons/html_builder/static/src/website_preview/new_content_modal.xml rename to addons/website/static/src/client_actions/website_preview/new_content_modal.xml diff --git a/addons/html_builder/static/src/website_preview/new_content_systray_item.js b/addons/website/static/src/client_actions/website_preview/new_content_systray_item.js similarity index 87% rename from addons/html_builder/static/src/website_preview/new_content_systray_item.js rename to addons/website/static/src/client_actions/website_preview/new_content_systray_item.js index 1aa1ffcd95a58..6cb32858b0c32 100644 --- a/addons/html_builder/static/src/website_preview/new_content_systray_item.js +++ b/addons/website/static/src/client_actions/website_preview/new_content_systray_item.js @@ -1,4 +1,4 @@ -import { NewContentModal } from "@html_builder/website_preview/new_content_modal"; +import { NewContentModal } from "./new_content_modal"; import { Component, useState } from "@odoo/owl"; import { useService } from "@web/core/utils/hooks"; diff --git a/addons/html_builder/static/src/website_preview/new_content_systray_item.xml b/addons/website/static/src/client_actions/website_preview/new_content_systray_item.xml similarity index 100% rename from addons/html_builder/static/src/website_preview/new_content_systray_item.xml rename to addons/website/static/src/client_actions/website_preview/new_content_systray_item.xml diff --git a/addons/html_builder/static/src/website_preview/publish_website_systray_item.js b/addons/website/static/src/client_actions/website_preview/publish_website_systray_item.js similarity index 100% rename from addons/html_builder/static/src/website_preview/publish_website_systray_item.js rename to addons/website/static/src/client_actions/website_preview/publish_website_systray_item.js diff --git a/addons/html_builder/static/src/website_preview/utils.js b/addons/website/static/src/client_actions/website_preview/utils.js similarity index 100% rename from addons/html_builder/static/src/website_preview/utils.js rename to addons/website/static/src/client_actions/website_preview/utils.js diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.editor.scss b/addons/website/static/src/client_actions/website_preview/website_builder_action.editor.scss similarity index 100% rename from addons/html_builder/static/src/website_preview/website_builder_action.editor.scss rename to addons/website/static/src/client_actions/website_preview/website_builder_action.editor.scss diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.js b/addons/website/static/src/client_actions/website_preview/website_builder_action.js similarity index 100% rename from addons/html_builder/static/src/website_preview/website_builder_action.js rename to addons/website/static/src/client_actions/website_preview/website_builder_action.js diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.scss b/addons/website/static/src/client_actions/website_preview/website_builder_action.scss similarity index 100% rename from addons/html_builder/static/src/website_preview/website_builder_action.scss rename to addons/website/static/src/client_actions/website_preview/website_builder_action.scss diff --git a/addons/html_builder/static/src/website_preview/website_builder_action.xml b/addons/website/static/src/client_actions/website_preview/website_builder_action.xml similarity index 100% rename from addons/html_builder/static/src/website_preview/website_builder_action.xml rename to addons/website/static/src/client_actions/website_preview/website_builder_action.xml diff --git a/addons/html_builder/static/src/website_preview/website_switcher_systray_item.js b/addons/website/static/src/client_actions/website_preview/website_switcher_systray_item.js similarity index 100% rename from addons/html_builder/static/src/website_preview/website_switcher_systray_item.js rename to addons/website/static/src/client_actions/website_preview/website_switcher_systray_item.js diff --git a/addons/html_builder/static/src/website_preview/website_switcher_systray_item.xml b/addons/website/static/src/client_actions/website_preview/website_switcher_systray_item.xml similarity index 100% rename from addons/html_builder/static/src/website_preview/website_switcher_systray_item.xml rename to addons/website/static/src/client_actions/website_preview/website_switcher_systray_item.xml diff --git a/addons/html_builder/static/src/website_preview/website_systray_item.js b/addons/website/static/src/client_actions/website_preview/website_systray_item.js similarity index 100% rename from addons/html_builder/static/src/website_preview/website_systray_item.js rename to addons/website/static/src/client_actions/website_preview/website_systray_item.js diff --git a/addons/html_builder/static/src/website_preview/website_systray_item.xml b/addons/website/static/src/client_actions/website_preview/website_systray_item.xml similarity index 100% rename from addons/html_builder/static/src/website_preview/website_systray_item.xml rename to addons/website/static/src/client_actions/website_preview/website_systray_item.xml diff --git a/addons/website/tests/test_website_reset_password.py b/addons/website/tests/test_website_reset_password.py index 70fd24ab793c6..471277cc6428d 100644 --- a/addons/website/tests/test_website_reset_password.py +++ b/addons/website/tests/test_website_reset_password.py @@ -11,7 +11,6 @@ @tagged('post_install', '-at_install') class TestWebsiteResetPassword(HttpCase): - def test_01_website_reset_password_tour(self): """The goal of this test is to make sure the reset password works.""" # We override unlink because we don't want the email to be auto deleted diff --git a/addons/website_blog/static/src/js/systray_items/new_content.js b/addons/website_blog/static/src/js/systray_items/new_content.js index 5c13c28a12a03..b620208ed2656 100644 --- a/addons/website_blog/static/src/js/systray_items/new_content.js +++ b/addons/website_blog/static/src/js/systray_items/new_content.js @@ -1,5 +1,5 @@ -import { NewContentModal } from '@html_builder/website_preview/new_content_modal'; -import { MODULE_STATUS } from "@html_builder/website_preview/new_content_element"; +import { NewContentModal } from "@website/client_actions/website_preview/new_content_modal"; +import { MODULE_STATUS } from "@website/client_actions/website_preview/new_content_element"; import { patch } from "@web/core/utils/patch"; patch(NewContentModal.prototype, { diff --git a/addons/website_event/static/src/js/systray_items/new_content.js b/addons/website_event/static/src/js/systray_items/new_content.js index 7ef4112042750..961ec86365d34 100644 --- a/addons/website_event/static/src/js/systray_items/new_content.js +++ b/addons/website_event/static/src/js/systray_items/new_content.js @@ -1,5 +1,5 @@ -import { NewContentModal } from '@html_builder/website_preview/new_content_modal'; -import { MODULE_STATUS } from "@html_builder/website_preview/new_content_element"; +import { NewContentModal } from '@website/client_actions/website_preview/new_content_modal'; +import { MODULE_STATUS } from "@website/client_actions/website_preview/new_content_element"; import { patch } from "@web/core/utils/patch"; patch(NewContentModal.prototype, { diff --git a/addons/website_forum/static/src/js/systray_items/new_content.js b/addons/website_forum/static/src/js/systray_items/new_content.js index 4346ea1ad9f71..c825e870af98e 100644 --- a/addons/website_forum/static/src/js/systray_items/new_content.js +++ b/addons/website_forum/static/src/js/systray_items/new_content.js @@ -1,5 +1,5 @@ -import { NewContentModal } from '@html_builder/website_preview/new_content_modal'; -import { MODULE_STATUS } from "@html_builder/website_preview/new_content_element"; +import { NewContentModal } from '@website/client_actions/website_preview/new_content_modal'; +import { MODULE_STATUS } from "@website/client_actions/website_preview/new_content_element"; import { patch } from "@web/core/utils/patch"; patch(NewContentModal.prototype, { diff --git a/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js b/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js index 5361387593cd1..b1d35cf1df4af 100644 --- a/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js +++ b/addons/website_hr_recruitment/static/src/js/systray_items/new_content.js @@ -1,5 +1,5 @@ -import { NewContentModal } from '@html_builder/website_preview/new_content_modal'; -import { MODULE_STATUS } from "@html_builder/website_preview/new_content_element"; +import { NewContentModal } from '@website/client_actions/website_preview/new_content_modal'; +import { MODULE_STATUS } from "@website/client_actions/website_preview/new_content_element"; import { rpc } from "@web/core/network/rpc"; import { patch } from "@web/core/utils/patch"; diff --git a/addons/website_livechat/static/src/js/systray_items/new_content.js b/addons/website_livechat/static/src/js/systray_items/new_content.js index 08713bbeff7c7..07a36a3d30746 100644 --- a/addons/website_livechat/static/src/js/systray_items/new_content.js +++ b/addons/website_livechat/static/src/js/systray_items/new_content.js @@ -1,5 +1,5 @@ -import { NewContentModal } from '@html_builder/website_preview/new_content_modal'; -import { MODULE_STATUS } from "@html_builder/website_preview/new_content_element"; +import { NewContentModal } from "@website/client_actions/website_preview/new_content_modal"; +import { MODULE_STATUS } from "@website/client_actions/website_preview/new_content_element"; import { patch } from "@web/core/utils/patch"; patch(NewContentModal.prototype, { diff --git a/addons/website_sale/static/src/js/systray_items/new_content.js b/addons/website_sale/static/src/js/systray_items/new_content.js index 8a0ad8c071e43..e5924b29a1442 100644 --- a/addons/website_sale/static/src/js/systray_items/new_content.js +++ b/addons/website_sale/static/src/js/systray_items/new_content.js @@ -1,6 +1,6 @@ import { patch } from "@web/core/utils/patch"; -import { NewContentModal } from '@html_builder/website_preview/new_content_modal'; -import { MODULE_STATUS } from "@html_builder/website_preview/new_content_element"; +import { NewContentModal } from '@website/client_actions/website_preview/new_content_modal'; +import { MODULE_STATUS } from "@website/client_actions/website_preview/new_content_element"; patch(NewContentModal.prototype, { setup() { diff --git a/addons/website_slides/static/src/js/components/edit_website_systray_item.js b/addons/website_slides/static/src/js/components/edit_website_systray_item.js index dbe5810f450b0..a9bf19ba4af29 100644 --- a/addons/website_slides/static/src/js/components/edit_website_systray_item.js +++ b/addons/website_slides/static/src/js/components/edit_website_systray_item.js @@ -1,4 +1,4 @@ -import { EditWebsiteSystrayItem } from "@html_builder/website_preview/edit_website_systray_item"; +import { EditWebsiteSystrayItem } from "@website/client_actions/website_preview/edit_website_systray_item"; import { patch } from "@web/core/utils/patch"; patch(EditWebsiteSystrayItem.prototype, { diff --git a/addons/website_slides/static/src/js/systray_items/new_content.js b/addons/website_slides/static/src/js/systray_items/new_content.js index e40aedd722bbd..b13d52346b098 100644 --- a/addons/website_slides/static/src/js/systray_items/new_content.js +++ b/addons/website_slides/static/src/js/systray_items/new_content.js @@ -1,5 +1,5 @@ -import { NewContentModal } from '@html_builder/website_preview/new_content_modal'; -import { MODULE_STATUS } from "@html_builder/website_preview/new_content_element"; +import { NewContentModal } from '@website/client_actions/website_preview/new_content_modal'; +import { MODULE_STATUS } from "@website/client_actions/website_preview/new_content_element"; import { patch } from "@web/core/utils/patch"; patch(NewContentModal.prototype, { From 0bc2e9afd93a492a6494641d245ddc866d948453 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Wed, 14 May 2025 10:37:45 +0200 Subject: [PATCH 191/240] fix switching to newsletter subscription form action was caused by a race condition due to an `await forEach` --- .../plugins/form/form_option_plugin.js | 10 ++++--- .../static/src/xml/website_form_editor.xml | 28 ++++++++++--------- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js index 5e12e34d41785..1964ae9f2bb44 100644 --- a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js +++ b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js @@ -636,10 +636,12 @@ export class FormOptionPlugin extends Plugin { const formInfo = registry.category("website.form_editor_actions").get(formKey, null); if (formInfo) { const formatInfo = getDefaultFormat(el); - await formInfo.formFields.forEach(async (field) => { - field.formatInfo = formatInfo; - await this.fetchFieldRecords(field); - }); + await Promise.all( + formInfo.formFields.map((field) => { + field.formatInfo = formatInfo; + return this.fetchFieldRecords(field); + }) + ); await this.fetchFormInfoFields(formInfo); } return formInfo; diff --git a/addons/website/static/src/xml/website_form_editor.xml b/addons/website/static/src/xml/website_form_editor.xml index ec26cbc3e7220..9a82837157a1d 100644 --- a/addons/website/static/src/xml/website_form_editor.xml +++ b/addons/website/static/src/xml/website_form_editor.xml @@ -31,8 +31,8 @@ t-att-data-type="field.type" data-name="Field" t-att-data-translated-name="defaultName"> -

-
- + +
+ No snippets found +

Oops! No snippets found.

+

Take a look at the search bar, there might be a small typo!

+
+ + + +