coveragebook_components 0.5.0 → 0.5.2

data/app/assets/build/coco/book.css

@@ -893,8 +893,11 @@ select {
         font-size: var(--text-font-size);
 }
 [data-coco][data-component="book-media-slide"] img {
+  height: 100%;
   width: 100%;
   border-radius: 0.375rem;
+  -o-object-fit: contain;
+     object-fit: contain;
 }
 .static {
   position: static;

data/app/assets/build/coco/book.js

@@ -11636,6 +11636,40 @@ ${t4.join("\n")}`);
   // ../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/index.js
   addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody);
 
+  // base/polyfills/request-submit.js
+  (function(prototype) {
+    if (typeof prototype.requestSubmit == "function")
+      return;
+    prototype.requestSubmit = function(submitter) {
+      if (submitter) {
+        validateSubmitter(submitter, this);
+        submitter.click();
+      } else {
+        submitter = document.createElement("input");
+        submitter.type = "submit";
+        submitter.hidden = true;
+        this.appendChild(submitter);
+        submitter.click();
+        this.removeChild(submitter);
+      }
+    };
+    function validateSubmitter(submitter, form) {
+      submitter instanceof HTMLElement || raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
+      submitter.type == "submit" || raise(TypeError, "The specified element is not a submit button");
+      submitter.form == form || raise(
+        DOMException,
+        "The specified element is not owned by this form element",
+        "NotFoundError"
+      );
+    }
+    function raise(errorConstructor, message, name) {
+      throw new errorConstructor(
+        "Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".",
+        name
+      );
+    }
+  })(HTMLFormElement.prototype);
+
   // ../../../node_modules/alpinejs/dist/module.esm.js
   var flushPending = false;
   var flushing = false;
@@ -19579,10 +19613,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             this.collapsed = false;
             return;
           }
-          this.setTooltipText();
           this.$root.setAttribute("data-collapsed", collapsed ? "true" : "false");
         });
-        this.$watch("$options.state", () => this.setTooltipText());
       },
       setTooltipText() {
         if (this.disabled) {
@@ -19685,6 +19717,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       root: {
         "x-options": "options",
         "x-tooltip": "tooltipText",
+        "x-effect": "setTooltipText",
         "@confirmation:confirm": "approveAndRun",
         "@confirmation:cancel": "cancelConfirmation",
         "@dropdown:show": "setState('active')",
@@ -19802,14 +19835,14 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // import-glob:/home/runner/work/coco/coco/app/assets/js/base|@baseComponents/**/*.js
+  // import-glob:/Users/mark/Projects/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
   var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports];
   var __default = modules;
 
   // base/components.js
   var components_default = registerComponents(__default);
 
-  // import-glob:/home/runner/work/coco/coco/app/assets/js/book|@bookComponents/**/*.js
+  // import-glob:/Users/mark/Projects/coveragebook/coco/app/assets/js/book|@bookComponents/**/*.js
   var modules2 = [];
   var __default2 = modules2;
 

data/app/assets/js/base/polyfills/request-submit.js

@@ -0,0 +1,39 @@
+(function (prototype) {
+  if (typeof prototype.requestSubmit == "function") return;
+
+  prototype.requestSubmit = function (submitter) {
+    if (submitter) {
+      validateSubmitter(submitter, this);
+      submitter.click();
+    } else {
+      submitter = document.createElement("input");
+      submitter.type = "submit";
+      submitter.hidden = true;
+      this.appendChild(submitter);
+      submitter.click();
+      this.removeChild(submitter);
+    }
+  };
+
+  function validateSubmitter(submitter, form) {
+    submitter instanceof HTMLElement ||
+      raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
+    submitter.type == "submit" ||
+      raise(TypeError, "The specified element is not a submit button");
+    submitter.form == form ||
+      raise(
+        DOMException,
+        "The specified element is not owned by this form element",
+        "NotFoundError"
+      );
+  }
+
+  function raise(errorConstructor, message, name) {
+    throw new errorConstructor(
+      "Failed to execute 'requestSubmit' on 'HTMLFormElement': " +
+        message +
+        ".",
+      name
+    );
+  }
+})(HTMLFormElement.prototype);

data/app/assets/js/base/setup.js

@@ -2,6 +2,8 @@ import "container-query-polyfill";
 import "alpine-turbo-drive-adapter";
 import * as Turbo from "@hotwired/turbo-rails";
 
+import "./polyfills/request-submit";
+
 import Alpine from "@libs/alpine";
 
 document.addEventListener("DOMContentLoaded", () => {

data/app/assets/js/helpers/path.js

@@ -2,4 +2,12 @@ function stripExtension(filename) {
   return filename.substring(0, filename.lastIndexOf(".")) || filename;
 }
 
-export { stripExtension };
+function dirname(path) {
+  return path ? path.match(/.*\//) : path;
+}
+
+function basename(path) {
+  return path ? path.replace(/.*\//, "") : path;
+}
+
+export { stripExtension, dirname, basename };

data/app/assets/js/helpers/screenshot.js

@@ -1,8 +1,13 @@
-import { toBlob } from "html-to-image";
+import html2canvas from "html2canvas";
 import { stripExtension } from "./path";
 import { isObject } from "./lang";
 import { blobToFile } from "./file";
 
+const screenshotDefaultOptions = {
+  useCORS: true,
+  logging: false,
+};
+
 function generateScreenshotFilename(name = null, ext = null) {
   name = [stripExtension(name || "screenshot"), new Date().getTime()].join("-");
   return ext ? `${name}.${ext}` : name;
@@ -16,11 +21,22 @@ async function captureElementScreenshot(el, filename, opts = {}) {
     opts = filename;
   }
 
-  filename = generateScreenshotFilename(filename, "jpg");
+  const screenshotFilename = generateScreenshotFilename(filename, "jpg");
+  const screenshotOptions = {
+    ...screenshotDefaultOptions,
+    ...opts,
+  };
 
-  const imageBlob = await toBlob(el, opts);
+  const canvas = await html2canvas(el, screenshotOptions);
+  const imageBlob = await new Promise((resolve, reject) => {
+    canvas.toBlob((result) => {
+      return result
+        ? resolve(result)
+        : reject(new Error("Screenshot could not be created"));
+    });
+  });
 
-  return blobToFile(imageBlob, filename, "image/jpg");
+  return blobToFile(imageBlob, screenshotFilename, "image/jpg");
 }
 
 export { captureElementScreenshot };

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

@@ -8,8 +8,12 @@
       @apply mb-4 xl:mb-6;
     }
 
+    .editor-form form {
+      @apply hidden;
+    }
+
     .editor-slide {
-      @apply shadow-lg;
+      @apply shadow-md;
 
       textarea {
         @apply flex-none w-full;
@@ -20,16 +24,12 @@
       @apply cursor-not-allowed;
     }
 
-    .editor-thumbnail-file {
-      @apply hidden pointer-events-none;
-    }
-
-    .editor-screenshot-wrapper {
+    .editor-thumbnail-wrapper {
       @apply w-0 overflow-hidden relative;
     }
 
-    .editor-screenshot {
-      @apply absolute w-[800px] top-0 z-[-1000] pointer-events-none;
+    .editor-thumbnail {
+      @apply absolute w-[500px] top-0 z-[-1000] pointer-events-none;
     }
 
     .editor-icon-bg-color {
@@ -37,9 +37,6 @@
       stroke-width: 2px;
     }
 
-    .editor-icon-text-color {
-    }
-
     [data-component="app-seamless-textarea"] {
       textarea {
         @apply outline outline-1 outline-transparent outline-offset-0;

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

@@ -1,222 +1,169 @@
 <%= 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 { tt("bg_color_picker.label") } %>
+            <% 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"
-                }
-              }
-            ) 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 %>
+        <% end %>
 
-              Background image
+        <% 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(
-              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 { tt("text_color_picker.label") } %>
+            <% button.with_icon do %>
+              <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <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: 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: "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: 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,
+          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: tt("save_button.saving_label")) %>
+          <%= tt("save_button.label") %>
         <% 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: {
+        bind: "slide"
+      }
+    ) 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 %>
-
-  <% end %>
-
-  <% if thumbnail? %>
+  </div>
+ 
+  <% if generate_thumbnail? %>
     <%# Slide used for thumbnail generation %>
-    <div class="editor-screenshot-wrapper">
-      <div x-ref="screenshot" class="editor-screenshot">
-        <%= coco_editable_slide(**slide_args) do |slide| %>
+    <div class="editor-thumbnail-wrapper">
+      <div x-ref="thumbnail" class="editor-thumbnail">
+        <%= coco_editable_slide(
+          **slide_args,
+          data: {
+            role: "slide-thumbnail"
+          },
+          x: {
+            bind: "slide"
+          }
+        ) do |slide| %>
           <% if title? %>
             <% slide.with_title do %>
               <span x-text="title"></span>
@@ -232,4 +179,16 @@
       </div>
     </div>
   <% end %>
+
+  <% 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 %>
 <% end %>