<%= 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 { "Background colour" } %> <% 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 do %> Drag a jpg, png or gif onto the slide area or… <% end %> <% end %> Background image <% 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 { "Text colour" } %> <% button.with_icon do %> <% end %> <% end %> <% end %> <% end %> <% toolbar.with_section do |section| %> <% section.with_button( icon: :undo_2, click: "history.undo", tooltip: "Undo", theme: :text_secondary, disabled: true, x: { "effect": "disabled = saving || !history.undoable" }, data: { role: "undo" } ) %> <% section.with_button( icon: :redo_2, click: "history.redo", tooltip: "Redo", theme: :text_secondary, disabled: true, x: { "effect": "disabled = saving || !history.redoable" }, data: { role: "redo" } ) %> <% section.with_button( theme: :positive, icon: :check, collapsible: false, type: "submit", disabled: true, data: { role: "save" }, x: { "@click.stop.prevent": "if(!loading) save()", "effect": "loading = saving; disabled = !history.undoable", ":class": "{'editor-saving': saving}" } ) do |button| %> <% button.with_state(:loading, text: "Saving...") %> Save <% end %> <% end %> <% end %>
<%# Editable slide %>
<%= coco_editable_slide( **slide_args, data: { role: "slide" }, x: { ":style": "slideStyles", ":class": "slideClasses", } ) 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 content %>
<%= content %>
<% end %> <% if false && thumbnail? %> <%# Slide used for thumbnail generation %>
<%= coco_editable_slide(**slide_args) do |slide| %> <% if title? %> <% slide.with_title do %> <% end %> <% end %> <% if text_1? %> <% slide.with_text_1 do %> <% end %> <% end %> <% end %>
<% end %> <% end %>