coveragebook_components 0.5.0 → 0.5.1

data/app/components/coco/app/blocks/slide_editor/slide_editor.html.erb

@@ -1,218 +1,172 @@
 <%= render component_tag(x: {
   data: x_data("appSlideEditor", alpine_props),
-  ":class": "{ready}",
-  "@direct-upload:error": "directUploadError",
+  ":class": "{ready}"
 }) do %>
-  <%= form_with(**form_args(
-    class: "editor-form",
-    "x-ref": "form",
-    "@turbo:submit-end": "submitEnd",
-    "@turbo:fetch-request-error": "submitError",
-    "@direct-uploads:end": "save"
-  )) do |f| %>  
-    <%= f.hidden_field(layout_name, **layout_options, "x-model": "layout") if layout? %>
-    <%= f.file_field(thumbnail_name, accept: "image/*", class: "editor-thumbnail-file", "x-ref": "thumbnail") if thumbnail? %>
-
-    <div class="editor-toolbar">
-      <%= coco_toolbar do |toolbar| %>
-        <% toolbar.with_section do |section| %>
-          <% if bg_color? %>
-            <% section.with_color_picker_button(
-              input_name: bg_color_name,
-              selected: bg_color_value,
-              form_builder: f,
-              wrapper: {
-                data: {
-                  role: "bg-color-picker"
-                },
-                x: {
-                  modelable: "selectedColor",
-                  model: "bgColor"
-                }
+  <div class="editor-toolbar">
+    <%= 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 color" } %>
-              <% button.with_icon do %>
-                <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="editor-icon-bg-color">
-                  <path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"></path>
-                </svg>
-              <% end %>
+            }
+          ) do |button| %>
+            <% button.with_picker %>
+            <% button.with_text { "Background colour" } %>
+            <% button.with_icon do %>
+              <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="editor-icon-bg-color">
+                <path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"></path>
+              </svg>
             <% end %>
           <% end %>
-          
-          <% if bg_image? %>
-            <% section.with_image_picker_button(
-              icon: :image_plus,
-              input_name: bg_image_name,
-              src: bg_image_value,
-              direct_upload: bg_image_options[:direct_upload],
-              form_builder: f,
-              wrapper: {
-                data: {
-                  role: "bg-image-picker"
-                },
-                x: {
-                  modelable: "selectedImage",
-                  model: "bgImage"
-                }
+        <% 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 %>
+            }
+          ) do |button| %>
+            <% button.with_picker do |picker| %>
+              <% picker.with_blank_state_text do %>
+                Drag a jpg, png or gif onto the slide area or&hellip;
               <% end %>
-
-              Background image
             <% end %>
+
+            Background image
           <% end %>
+        <% end %>
 
-          <% if text_color? %>
-            <% section.with_color_picker_button(
-              input_name: text_color_name,
-              selected: text_color_value,
-              form_builder: f,
-              wrapper: {
-                data: {
-                  role: "text-color-picker"
-                },
-                x: {
-                  modelable: "selectedColor",
-                  model: "textColor"
-                }
+        <% 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 color" } %>
-              <% button.with_icon do %>
-                <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="editor-icon-text-color">
-                  <path d="M4.99994 13.3333L9.99994 3.33334L14.9999 13.3333" stroke="#111827" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M6.66656 10H13.3332" stroke="#111827" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-                  <rect x="2.25" y="15.25" width="15.5" height="2.5" rx="1.25" fill="currentColor" stroke="#111827" stroke-width="0.5"/>
-                </svg>
-              <% end %>
+            }
+          ) do |button| %>
+            <% button.with_picker %>
+            <% button.with_text { "Text colour" } %>
+            <% button.with_icon do %>
+              <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="editor-icon-text-color">
+                <path d="M4.99994 13.3333L9.99994 3.33334L14.9999 13.3333" stroke="#111827" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M6.66656 10H13.3332" stroke="#111827" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                <rect x="2.25" y="15.25" width="15.5" height="2.5" rx="1.25" fill="currentColor" stroke="#111827" stroke-width="0.5"/>
+              </svg>
             <% 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 = !history.undoable" },
-            data: {
-              role: "undo"
-            }
-          ) %>
+      <% 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 = !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 %>
+        <% 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 %> 
-    </div>
-    
-    <%# Editable slide %>
-    <div
-      class="editor-slide"
-      x-ref="slide"
-      @dragenter.stop.prevent="dragging = true"
-      @dragover.stop.prevent="dragging = true"
-      @dragleave.stop.prevent="dragging = false"
-      @drop.stop.prevent="handleImageDrop($event)">
-      <%= coco_editable_slide(
-        **slide_args,
-        data: {
-          role: "slide"
-        },
-        x: {
-          ":style": "slideStyles",
-          ":class": "slideClasses",
-        }
-      ) do |slide| %>
-        <% if title? %>
-          <% slide.with_title do %>
-            <%= coco_seamless_textarea(
-              name: title_name,
-              multiline: false,
-              form_builder: f,
-              **title_options,
-              wrapper: {
-                data: {
-                  role: "title-editor"
-                },
-                x: {
-                  modelable: "value",
-                  model: "title"
-                }
-              }
-            ) %>
-          <% end %>
+      <% end %>
+    <% end %> 
+  </div>
+  
+  <%# Editable slide %>
+  <div
+    class="editor-slide"
+    x-ref="slide"
+    @dragenter.stop.prevent="dragging = true"
+    @dragover.stop.prevent="dragging = true"
+    @dragleave.stop.prevent="dragging = false"
+    @drop.stop.prevent="handleImageDrop($event)">
+    <%= 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 %>
-            <%= coco_seamless_textarea(
-              name: text_1_name,
-              multiline: true,
-              form_builder: f,
-              **text_1_options,
-              wrapper: {
-                data: {
-                  role: "text-1-editor"
-                },
-                x: {
-                  modelable: "value",
-                  model: "text1"
-                }
-              }
-            ) %>
-          <% end %>
+      <% if text_1? %>
+        <% slide.with_text_1 do %>
+          <%= text_1 %>
         <% end %>
       <% end %>
-    </div>
-
-    <% if content %>
-      <%# Any additional fields required %>
-      <div class="editor-additional-content">
-        <%= content %>
-      </div>
     <% end %>
+  </div>
 
+  <% if content %>
+    <div
+      class="editor-form"
+      x-ref="form"
+      @turbo:submit-end="submitSuccess"
+      @turbo:fetch-request-error="submitError"
+      @direct-upload:error="directUploadError"
+      @direct-uploads:end="save">
+      <%= content %>
+    </div>
   <% end %>
-
-  <% if thumbnail? %>
+ 
+  <% if false && thumbnail? %>
     <%# Slide used for thumbnail generation %>
     <div class="editor-screenshot-wrapper">
       <div x-ref="screenshot" class="editor-screenshot">
@@ -232,4 +186,5 @@
       </div>
     </div>
   <% end %>
+
 <% end %>

data/app/components/coco/app/blocks/slide_editor/slide_editor.js

@@ -13,15 +13,30 @@ const thumbnailOpts = {
 };
 
 export default CocoComponent("appSlideEditor", (data) => {
+  const initialData = {
+    layout: data.layout,
+    title: data.title,
+    text1: data.text1,
+    bgColor: data.bgColor,
+    textColor: data.textColor,
+    bgImage: {
+      name: data.bgImage,
+      data: data.bgImage,
+    },
+  };
+
   return {
     use: [withUndo()],
 
-    ...data,
-    saved: { ...data },
+    ...initialData,
+
+    saved: { ...initialData },
+
     saving: false,
     ready: false,
     dragging: false,
     errors: [],
+
     thumbnailFile: null,
 
     get bgImagePicker() {
@@ -29,13 +44,6 @@ export default CocoComponent("appSlideEditor", (data) => {
     },
 
     init() {
-      // Add property changes to the undo/redo history
-      this._fields.forEach((name) => {
-        this.$watch(name, (value, oldValue) =>
-          this.history.add(name, value, oldValue)
-        );
-      });
-
       // Update thumbnail field when new thumbnail is generated
       this.$watch("thumbnailFile", () => this._syncThumbnailField());
 
@@ -43,7 +51,16 @@ export default CocoComponent("appSlideEditor", (data) => {
         errors.forEach((error) => console.error(error.message)); // TODO display errors properly!
       });
 
-      this.$nextTick(() => (this.ready = true));
+      this.$nextTick(() => {
+        // Add property changes to the undo/redo history
+        this._fields.forEach((name) => {
+          this.$watch(name, (value, oldValue) =>
+            this.history.add(name, value, oldValue)
+          );
+        });
+
+        this.ready = true;
+      });
     },
 
     undo(name, value) {
@@ -79,7 +96,11 @@ export default CocoComponent("appSlideEditor", (data) => {
         }
       }
 
-      this.$refs.form.requestSubmit();
+      if (this.$refs.form) {
+        this.$refs.form.querySelector("form").requestSubmit();
+      } else {
+        this.submitSuccess();
+      }
     },
 
     submitEnd(event) {
@@ -106,12 +127,43 @@ export default CocoComponent("appSlideEditor", (data) => {
       this._handleSaveError($event.detail.error, { event: $event });
     },
 
+    syncImageField(el, image) {
+      const dataTransfer = new DataTransfer();
+      if (image.file && image.file instanceof File) {
+        dataTransfer.items.add(image.file);
+      }
+      el.files = dataTransfer.files;
+    },
+
+    input: {
+      layout: { "x-model.fill": "layout" },
+      title: { "x-model.fill": "title" },
+      text1: { "x-model.fill": "text1" },
+      bgColor: { "x-model.fill": "bgColorHex" },
+      textColor: { "x-model.fill": "textColorHex" },
+      bgImage: { "x-effect": "syncImageField($el, bgImage)" },
+      bgImagePurge: { ":checked": "!hasBgImage" },
+    },
+
+    get hasBgImage() {
+      return !!(this.bgImage && this.bgImage.data);
+    },
+
+    get bgColorHex() {
+      return this.bgColor.replace("#", "");
+    },
+
+    get textColorHex() {
+      return this.textColor.replace("#", "");
+    },
+
     get slideStyles() {
       return {
         backgroundColor: this.bgColor,
         color: this.textColor,
-        backgroundImage:
-          this.bgImage && this.bgImage.data && `url('${this.bgImage.data}')`,
+        backgroundImage: this.hasBgImage
+          ? `url('${this.bgImage.data}')`
+          : "none",
       };
     },
 
@@ -123,9 +175,7 @@ export default CocoComponent("appSlideEditor", (data) => {
     },
 
     get isDarkBg() {
-      return (this.bgImage && this.bgImage.data) || this.bgColor
-        ? isDark(this.bgColor)
-        : false;
+      return this.hasBgImage || this.bgColor ? isDark(this.bgColor) : false;
     },
 
     get shouldGenerateThumbnail() {
@@ -133,7 +183,7 @@ export default CocoComponent("appSlideEditor", (data) => {
     },
 
     get _fields() {
-      return Object.keys(data);
+      return Object.keys(initialData);
     },
 
     async _generateThumbnail() {
@@ -170,6 +220,9 @@ export default CocoComponent("appSlideEditor", (data) => {
 
     _handleSaveError(message = "Error saving slide", context = {}) {
       this.errors.push({ message, context });
+      this.errors.forEach((err) => {
+        console.log(err.message);
+      });
       this.saving = false;
 
       this.$dispatch("slide:save-end", { success: false });