<%= render component_tag(x: {
data: x_data("appSlideEditor", alpine_props),
":class": "{ready}",
"undo": true
}) do %>
<%= coco_toolbar do |toolbar| %>
<% toolbar.with_section do |section| %>
<% if layout? %>
<% section.with_layout_picker_button(
icon: :layout_template,
selected: current_layout,
wrapper: {
data: {
role: "layout-picker"
},
x: {
modelable: "selectedLayout",
model: "layout"
}
}
) do |button| %>
<% button.with_layout(name: "one-col-title", thumbnail: "slides/one-col-title-layout") %>
<% button.with_layout(name: "two-col-mixed", thumbnail: "slides/two-col-mixed-layout") %>
<% button.with_layout(name: "one-col-media", thumbnail: "slides/one-col-media-layout") %>
<% button.with_layout(name: "two-col-media", thumbnail: "slides/two-col-media-layout") %>
<% button.with_layout(name: "one-col-text", thumbnail: "slides/one-col-text-layout") %>
<% button.with_layout(name: "two-col-text", thumbnail: "slides/two-col-text-layout") %>
<%= tt("layout_picker.label") %>
<% end %>
<% end %>
<% if bg_color? %>
<% section.with_color_picker_button(
**@bg_color_options.to_h,
wrapper: {
data: {
role: "bg-color-picker"
},
x: {
modelable: "selectedColor",
model: "bgColor",
"@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: {
modelable: "selectedImage",
model: "bgImage"
}
}
) 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",
modelable: "selectedColor",
model: "textColor"
}
}
) 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 %>
<%= coco_editable_slide(
**slide_args,
data: {
role: "slide"
},
x: {
bind: "slide",
":data-placeholders": "blankTextAreasList",
}
) do |slide| %>
<% if title? %>
<% slide.with_title do %>
<%= title %>
<% end %>
<% end %>
<% if text_1? %>
<% slide.with_text_1 do %>
<%= text_1 %>
<% end %>
<% end %>
<% if text_2? %>
<% slide.with_text_2 do %>
<%= text_2 %>
<% end %>
<% end %>
<% if image_1? %>
<% slide.with_image_1 do %>
<%= render Coco::ImageUploader.new(
class: "editor-foreground-image-uploader",
x: {
"@image-uploader:load": "image1 = $event.detail.file"
}
) do %>
<%= coco_button_group(
theme: :toolbar,
floating: true,
class: "editor-image-upload-toolbar"
) do |group| %>
<% group.with_button(icon: :trash_2, tooltip: "remove image", x: {"@click.stop": "image1 = {}; clear();"}) %>
<% end %>
<%= coco_icon(:image_plus) %>
Add image
<% end %>
<% end %>
<% end %>
<% if image_2? %>
<% slide.with_image_2 do %>
<%= render Coco::ImageUploader.new(
class: "editor-foreground-image-uploader",
x: {
"@image-uploader:load": "image2 = $event.detail.file"
}
) do %>
<%= coco_button_group(
theme: :toolbar,
floating: true,
class: "editor-image-upload-toolbar"
) do |group| %>
<% group.with_button(icon: :trash_2, tooltip: "remove image", x: {"@click.stop": "image2 = {}; clear();"}) %>
<% end %>
<%= coco_icon(:image_plus) %>
Add image
<% end %>
<% end %>
<% end %>
<% end %>
<%= 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 %>
<% if text_2? %>
<% slide.with_text_2 do %>
<% end %>
<% end %>
<% if image_1? %>
<% slide.with_image_1 do %>
<% end %>
<% end %>
<% if image_2? %>
<% slide.with_image_2 do %>
<% end %>
<% end %>
<% end %>
<% end %>
<% if content %>
<%= content %>
<% end %>
<% end %>