coveragebook_components 0.5.1 → 0.5.2

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')",

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/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

@@ -13,7 +13,7 @@
     }
 
     .editor-slide {
-      @apply shadow-lg;
+      @apply shadow-md;
 
       textarea {
         @apply flex-none w-full;
@@ -24,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 {
@@ -41,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

@@ -18,7 +18,7 @@
             }
           ) do |button| %>
             <% button.with_picker %>
-            <% button.with_text { "Background colour" } %>
+            <% 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>
@@ -41,12 +41,10 @@
             }
           ) 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 %>
+              <% picker.with_blank_state_text { tt("bg_image_picker.blank_state") } %>
             <% end %>
 
-            Background image
+            <%= tt("bg_image_picker.label") %>
           <% end %>
         <% end %>
 
@@ -63,9 +61,9 @@
             }
           ) do |button| %>
             <% button.with_picker %>
-            <% button.with_text { "Text colour" } %>
+            <% 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" class="editor-icon-text-color">
+              <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"/>
@@ -79,7 +77,7 @@
         <% section.with_button(
           icon: :undo_2,
           click: "history.undo",
-          tooltip: "Undo",
+          tooltip: tt("undo_button.tooltip"),
           theme: :text_secondary,
           disabled: true,
           x: { "effect": "disabled = saving || !history.undoable" },
@@ -91,7 +89,7 @@
         <% section.with_button(
           icon: :redo_2,
           click: "history.redo",
-          tooltip: "Redo",
+          tooltip: tt("redo_button.tooltip"),
           theme: :text_secondary,
           disabled: true,
           x: { "effect": "disabled = saving || !history.redoable" },
@@ -115,8 +113,8 @@
             ":class": "{'editor-saving': saving}"
           }
         ) do |button| %>
-          <% button.with_state(:loading, text: "Saving...") %>
-          Save
+          <% button.with_state(:loading, text: tt("save_button.saving_label")) %>
+          <%= tt("save_button.label") %>
         <% end %>
       <% end %>
     <% end %> 
@@ -136,8 +134,7 @@
         role: "slide"
       },
       x: {
-        ":style": "slideStyles",
-        ":class": "slideClasses",
+        bind: "slide"
       }
     ) do |slide| %>
       <% if title? %>
@@ -153,24 +150,20 @@
       <% end %>
     <% 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 false && thumbnail? %>
+  <% 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>
@@ -187,4 +180,15 @@
     </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 %>

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

@@ -2,16 +2,8 @@ import { CocoComponent } from "@js/coco";
 import { getData } from "@helpers/alpine";
 import { captureElementScreenshot } from "@helpers/screenshot";
 import { isDark } from "@helpers/color";
-import { wasSuccessful } from "@helpers/turbo_events";
 import { withUndo } from "@js/base/mixins";
 
-const thumbnailOpts = {
-  canvasWidth: 800,
-  canvasHeight: 500,
-  quality: 0.7,
-  pixelRatio: 1,
-};
-
 export default CocoComponent("appSlideEditor", (data) => {
   const initialData = {
     layout: data.layout,
@@ -44,9 +36,6 @@ export default CocoComponent("appSlideEditor", (data) => {
     },
 
     init() {
-      // Update thumbnail field when new thumbnail is generated
-      this.$watch("thumbnailFile", () => this._syncThumbnailField());
-
       this.$watch("errors", (errors) => {
         errors.forEach((error) => console.error(error.message)); // TODO display errors properly!
       });
@@ -82,10 +71,12 @@ export default CocoComponent("appSlideEditor", (data) => {
     },
 
     async save() {
-      this.errors.length = 0;
+      if (this.saving) return;
+
+      this.clearErrors();
       this.saving = true;
 
-      if (this.shouldGenerateThumbnail) {
+      if (this.$refs.thumbnail) {
         try {
           await this._generateThumbnail();
         } catch (error) {
@@ -96,24 +87,21 @@ export default CocoComponent("appSlideEditor", (data) => {
         }
       }
 
-      if (this.$refs.form) {
-        this.$refs.form.querySelector("form").requestSubmit();
+      const form = this.$refs.form && this.$refs.form.querySelector("form");
+
+      if (form && form.dataset.submit !== "false") {
+        form.requestSubmit();
       } else {
         this.submitSuccess();
       }
     },
 
-    submitEnd(event) {
-      handler = wasSuccessful(event) ? "submitSuccess" : "submitError";
-      this[handler](event);
-    },
-
     submitSuccess() {
       this.history.clear();
       this._fields.forEach((name) => (this.saved[name] = this[name]));
       this.saving = false;
 
-      console.info("Custom slide saved");
+      console.info("Slide changes saved");
       this.$dispatch("slide:save-end", { success: true });
     },
 
@@ -127,22 +115,16 @@ 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;
+    clearErrors() {
+      this.errors.length = 0;
     },
 
-    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" },
+    syncFileInput(input, file) {
+      const dataTransfer = new DataTransfer();
+      if (file && file instanceof File) {
+        dataTransfer.items.add(file);
+      }
+      input.files = dataTransfer.files;
     },
 
     get hasBgImage() {
@@ -157,48 +139,18 @@ export default CocoComponent("appSlideEditor", (data) => {
       return this.textColor.replace("#", "");
     },
 
-    get slideStyles() {
-      return {
-        backgroundColor: this.bgColor,
-        color: this.textColor,
-        backgroundImage: this.hasBgImage
-          ? `url('${this.bgImage.data}')`
-          : "none",
-      };
-    },
-
-    get slideClasses() {
-      return {
-        "slide-bg-dark": this.isDarkBg,
-        "slide-bg-light": !this.isDarkBg,
-      };
-    },
-
     get isDarkBg() {
       return this.hasBgImage || this.bgColor ? isDark(this.bgColor) : false;
     },
 
-    get shouldGenerateThumbnail() {
-      return !!this.$refs.thumbnail;
-    },
-
     get _fields() {
       return Object.keys(initialData);
     },
 
     async _generateThumbnail() {
-      const screenshotSlide = this.$refs.screenshot.firstElementChild;
-
-      // The HTML-to-image library didn't like these styles being dynamically
-      // bound in the usual Alpine way so we have to manually apply them instead.
-      for (const [key, value] of Object.entries(this.slideStyles)) {
-        screenshotSlide.style[key] = value;
-      }
-
       this.thumbnailFile = await captureElementScreenshot(
-        screenshotSlide,
-        "slide-thumbnail",
-        thumbnailOpts
+        this.$refs.thumbnail.firstElementChild,
+        "slide-thumbnail"
       );
 
       console.info(
@@ -207,25 +159,42 @@ export default CocoComponent("appSlideEditor", (data) => {
       );
     },
 
-    // Called whenever a new thumbnail is generated,
-    // adds the thumbnail file to the hidden thumbnail file
-    // input upload field.
-    _syncThumbnailField() {
-      const dataTransfer = new DataTransfer();
-      if (this.thumbnailFile instanceof File) {
-        dataTransfer.items.add(this.thumbnailFile);
-      }
-      this.$refs.thumbnail.files = dataTransfer.files;
-    },
-
     _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 });
     },
+
+    /* bindings */
+
+    slide: {
+      [":style"]() {
+        return {
+          backgroundColor: this.bgColor,
+          color: this.textColor,
+          backgroundImage: this.hasBgImage
+            ? `url('${this.bgImage.data}')`
+            : "none",
+        };
+      },
+      [":class"]() {
+        return {
+          "slide-bg-dark": this.isDarkBg,
+          "slide-bg-light": !this.isDarkBg,
+        };
+      },
+    },
+
+    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": "syncFileInput($el, bgImage.file)" },
+      bgImagePurge: { ":checked": "!hasBgImage" },
+      thumbnailImage: { "x-effect": "syncFileInput($el, thumbnailFile)" },
+    },
   };
 });

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

@@ -6,8 +6,6 @@ module Coco
         include Coco::BookHelper
         include Coco::FormatHelper
 
-        renders_one :form
-
         renders_one :title, ->(value = nil, **textarea_options) do
           Coco::App::Elements::SeamlessTextarea.new(**textarea_options,
             value: value,
@@ -37,9 +35,11 @@ module Coco
           @bg_image_options = {src: src, **input_options}
         end
 
-        # renders_one :thumbnail, ->(name: :thumbnail_image, **input_options) do
-        #   add_field(:thumbnail, name, input_options)
-        # end
+        def initialize(generate_thumbnail: true, **kwargs)
+          @generate_thumbnail = generate_thumbnail
+        end
+
+        def generate_thumbnail? = @generate_thumbnail
 
         def slide_args
           {

data/app/components/coco/app/elements/button/button.css

@@ -6,7 +6,7 @@
       @apply transition-all overflow-hidden;
       border-radius: 44px;
 
-      .button-content {
+      & > .button-element .button-content {
         @apply font-semibold;
       }
     }
@@ -23,7 +23,7 @@
         @apply bg-primary-700;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-positive-300;
       }
 
@@ -44,7 +44,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-positive-300;
       }
 
@@ -65,7 +65,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-positive-300;
       }
 
@@ -86,7 +86,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-positive-300;
       }
 
@@ -106,7 +106,7 @@
         @apply bg-negative-800;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-negative-300;
       }
 
@@ -126,7 +126,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-negative-300;
       }
 
@@ -146,7 +146,7 @@
         @apply bg-warning-800;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-warning-300;
       }
 
@@ -166,7 +166,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-warning-300;
       }
 
@@ -186,7 +186,7 @@
         @apply bg-info-800;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-info-300;
       }
 
@@ -206,7 +206,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-info-300;
       }
 

data/app/components/coco/base/button/button.css

@@ -41,7 +41,7 @@
 
     /* loading */
 
-    &[data-state="loading"] .button-icon {
+    &[data-state="loading"] > .button-element .button-icon {
       @apply animate-spin;
     }
 
@@ -53,7 +53,7 @@
 
     /* Icons */
 
-    &[data-icon-position="end"] {
+    &[data-icon-position="end"] > .button-element {
       .button-content {
         @apply order-1;
       }
@@ -67,7 +67,7 @@
       }
     }
 
-    &.with-icon[data-collapsed="true"] {
+    &.with-icon[data-collapsed="true"] > .button-element {
       .button-content {
         display: none;
       }