<%= render component_tag(x: { data: x_data("appSlideEditor", alpine_props), ":class": "{ready}" }) do %>
<%= coco_toolbar do |toolbar| %> <% toolbar.with_section do |section| %> <% if bg_color? %> <% section.with_color_picker_button( **@bg_color_options.to_h, wrapper: { data: { role: "bg-color-picker" }, x: { "@color-picker:change": "bgColor = $event.detail.color" } } ) do |button| %> <% button.with_picker %> <% button.with_text { tt("bg_color_picker.label") } %> <% button.with_icon do %> <% end %> <% end %> <% end %> <% if bg_image? %> <% section.with_image_picker_button( icon: :image_plus, src: bg_image_src, wrapper: { data: { role: "bg-image-picker" }, x: { "@image-picker:change": "bgImage = $event.detail.image" } } ) do |button| %> <% button.with_picker do |picker| %> <% picker.with_blank_state_text { tt("bg_image_picker.blank_state") } %> <% end %> <%= tt("bg_image_picker.label") %> <% end %> <% end %> <% if text_color? %> <% section.with_color_picker_button( **@text_color_options.to_h, wrapper: { data: { role: "text-color-picker" }, x: { "@color-picker:change": "textColor = $event.detail.color" } } ) do |button| %> <% button.with_picker %> <% button.with_text { tt("text_color_picker.label") } %> <% button.with_icon do %> <% end %> <% end %> <% end %> <% end %> <% toolbar.with_section do |section| %> <% section.with_button( icon: :undo_2, click: "history.undo", tooltip: tt("undo_button.tooltip"), theme: :text_secondary, disabled: true, x: { "effect": "disabled = saving || !history.undoable" }, data: { role: "undo" } ) %> <% section.with_button( icon: :redo_2, click: "history.redo", tooltip: tt("redo_button.tooltip"), theme: :text_secondary, disabled: true, x: { "effect": "disabled = saving || !history.redoable" }, data: { role: "redo" } ) %> <% section.with_button( theme: :positive, icon: :check, collapsible: false, disabled: true, data: { role: "save" }, x: { "@click.stop.prevent": "if(!saving) save()", "effect": "loading = saving; disabled = !history.undoable", ":class": "{'editor-saving': saving}" } ) do |button| %> <% button.with_state(:loading, text: tt("save_button.saving_label")) %> <%= tt("save_button.label") %> <% end %> <% end %> <% end %>
<%# Editable slide %>
<%= coco_editable_slide( **slide_args, data: { role: "slide" }, x: { bind: "slide" } ) do |slide| %> <% if title? %> <% slide.with_title do %> <%= title %> <% end %> <% end %> <% if text_1? %> <% slide.with_text_1 do %> <%= text_1 %> <% end %> <% end %> <% end %>
<% if generate_thumbnail? %> <%# Slide used for thumbnail generation %>
<%= coco_editable_slide( **slide_args, data: { role: "slide-thumbnail" }, x: { bind: "slide" } ) do |slide| %> <% if title? %> <% slide.with_title do %> <% end %> <% end %> <% if text_1? %> <% slide.with_text_1 do %> <% end %> <% end %> <% end %>
<% end %> <% if content %>
<%= content %>
<% end %> <% end %>