coveragebook_components 0.5.0 → 0.5.2

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

@@ -2,26 +2,33 @@ 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,
+    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,21 +36,20 @@ 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());
-
       this.$watch("errors", (errors) => {
         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) {
@@ -65,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) {
@@ -79,12 +87,13 @@ export default CocoComponent("appSlideEditor", (data) => {
         }
       }
 
-      this.$refs.form.requestSubmit();
-    },
+      const form = this.$refs.form && this.$refs.form.querySelector("form");
 
-    submitEnd(event) {
-      handler = wasSuccessful(event) ? "submitSuccess" : "submitError";
-      this[handler](event);
+      if (form && form.dataset.submit !== "false") {
+        form.requestSubmit();
+      } else {
+        this.submitSuccess();
+      }
     },
 
     submitSuccess() {
@@ -92,7 +101,7 @@ export default CocoComponent("appSlideEditor", (data) => {
       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 });
     },
 
@@ -106,49 +115,42 @@ export default CocoComponent("appSlideEditor", (data) => {
       this._handleSaveError($event.detail.error, { event: $event });
     },
 
-    get slideStyles() {
-      return {
-        backgroundColor: this.bgColor,
-        color: this.textColor,
-        backgroundImage:
-          this.bgImage && this.bgImage.data && `url('${this.bgImage.data}')`,
-      };
+    clearErrors() {
+      this.errors.length = 0;
     },
 
-    get slideClasses() {
-      return {
-        "slide-bg-dark": this.isDarkBg,
-        "slide-bg-light": !this.isDarkBg,
-      };
+    syncFileInput(input, file) {
+      const dataTransfer = new DataTransfer();
+      if (file && file instanceof File) {
+        dataTransfer.items.add(file);
+      }
+      input.files = dataTransfer.files;
     },
 
-    get isDarkBg() {
-      return (this.bgImage && this.bgImage.data) || this.bgColor
-        ? isDark(this.bgColor)
-        : false;
+    get hasBgImage() {
+      return !!(this.bgImage && this.bgImage.data);
     },
 
-    get shouldGenerateThumbnail() {
-      return !!this.$refs.thumbnail;
+    get bgColorHex() {
+      return this.bgColor.replace("#", "");
     },
 
-    get _fields() {
-      return Object.keys(data);
+    get textColorHex() {
+      return this.textColor.replace("#", "");
     },
 
-    async _generateThumbnail() {
-      const screenshotSlide = this.$refs.screenshot.firstElementChild;
+    get isDarkBg() {
+      return this.hasBgImage || this.bgColor ? isDark(this.bgColor) : false;
+    },
 
-      // 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;
-      }
+    get _fields() {
+      return Object.keys(initialData);
+    },
 
+    async _generateThumbnail() {
       this.thumbnailFile = await captureElementScreenshot(
-        screenshotSlide,
-        "slide-thumbnail",
-        thumbnailOpts
+        this.$refs.thumbnail.firstElementChild,
+        "slide-thumbnail"
       );
 
       console.info(
@@ -157,22 +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.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,119 +6,70 @@ module Coco
         include Coco::BookHelper
         include Coco::FormatHelper
 
-        renders_one :bg_color, ->(name: :bg_color_hex, **input_options) do
-          add_field(:bg_color, name, input_options)
+        renders_one :title, ->(value = nil, **textarea_options) do
+          Coco::App::Elements::SeamlessTextarea.new(**textarea_options,
+            value: value,
+            multiline: false,
+            focus: true,
+            data: {role: "title-editor"},
+            x: {modelable: "value", model: "title"})
         end
 
-        renders_one :text_color, ->(name: :text_color_hex, **input_options) do
-          add_field(:text_color, name, input_options)
+        renders_one :text_1, ->(value = nil, **textarea_options) do
+          Coco::App::Elements::SeamlessTextarea.new(**textarea_options,
+            value: value,
+            multiline: false,
+            data: {role: "text-1-editor"},
+            x: {modelable: "value", model: "text1"})
         end
 
-        renders_one :bg_image, ->(name: :bg_image, **input_options) do
-          add_field(:bg_image, name, input_options)
+        renders_one :bg_color, ->(value = nil, **input_options) do
+          @bg_color_options = {selected: value, **input_options}
         end
 
-        renders_one :thumbnail, ->(name: :thumbnail_image, **input_options) do
-          add_field(:thumbnail, name, input_options)
+        renders_one :text_color, ->(value = nil, **input_options) do
+          @text_color_options = {selected: value, **input_options}
         end
 
-        renders_one :title, ->(name: :title, **input_options) do
-          add_field(:title, name, input_options)
+        renders_one :bg_image, ->(src = nil, **input_options) do
+          @bg_image_options = {src: src, **input_options}
         end
 
-        renders_one :text_1, ->(name: :text_1, **input_options) do
-          add_field(:text_1, name, input_options)
+        def initialize(generate_thumbnail: true, **kwargs)
+          @generate_thumbnail = generate_thumbnail
         end
 
-        renders_one :layout, ->(name: :layout, **input_options) do
-          add_field(:layout, name, input_options)
-        end
-
-        before_render do
-          with_layout(value: "basic") unless layout?
-        end
-
-        attr_reader :fields
-
-        def initialize(form: nil, **kwargs)
-          @form_args = form.to_h
-          @model = @form_args[:model]
-          @fields = {}
-        end
-
-        def form_args(attrs = {})
-          html_args = @form_args.fetch(:html, {})
-          attrs[:class] = class_names(html_args[:class], attrs[:class])
-          html_args.merge!(attrs)
-          @form_args.merge({html: html_args})
-        end
+        def generate_thumbnail? = @generate_thumbnail
 
         def slide_args
           {
-            bg_image: bg_image_value,
-            bg_color_hex: bg_color_value,
-            text_color_hex: text_color_value,
-            layout: layout_value,
+            bg_image: bg_image_src,
+            bg_color_hex: bg_color_css,
+            text_color_hex: text_color_css,
             render_empty: true
           }
         end
 
         def alpine_props
           {
-            bg_color: format_css_hex_color(bg_color_value),
-            text_color: format_css_hex_color(text_color_value),
-            title: title_value,
-            text_1: text_1_value,
-            layout: layout_value,
-            bg_image: {
-              name: ((field?(:bg_image) && bg_image_value.present?) && File.basename(bg_image_value)),
-              data: (bg_image_value if field?(:bg_image))
-            }
+            bg_color: bg_color_css,
+            text_color: text_color_css,
+            title: title&.value,
+            text_1: text_1&.value,
+            bg_image: bg_image_src
           }
         end
 
-        def method_missing(name, *args, &block)
-          name.match(/_(value|options|name)/) do |matches|
-            field_name = name.to_s.gsub(matches[0], "").to_sym
-            method = matches[1].to_sym
-            if field?(field_name)
-              fields[field_name].public_send(method)
-            end
-          end
+        def bg_color_css
+          @bg_color_options[:selected] if @bg_color_options
         end
 
-        def respond_to_missing?(name, include_private = false)
-          field_name = name.to_s.gsub(/_(value|options|name)/, "")
-          field?(field_name.to_sym)
+        def text_color_css
+          @text_color_options[:selected] if @text_color_options
         end
 
-        def field?(name)
-          fields.key?(name)
-        end
-
-        private
-
-        def add_field(field_name, name, options = {})
-          model_value = @model&.public_send(name) if @model&.respond_to?(name)
-          fields[field_name] = SlideInput.new(name, model_value, options)
-        end
-
-        SlideInput = Data.define(:name, :model_value, :input_options) do
-          def value
-            input_options.fetch(:value, model_value)
-          end
-
-          def options
-            input_options.tap do |options|
-              options[:value] = value
-            end
-          end
-
-          def to_json
-            "\"#{value}\"" if value.present?
-          end
-
-          alias_method :to_s, :value
+        def bg_image_src
+          @bg_image_options[:src] if @bg_image_options
         end
       end
     end

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

@@ -34,7 +34,7 @@
       }
     }
 
-    &:not(.with-title) .alert-message {
+    &.with-title .alert-message {
       @apply mt-1;
     }
 

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/app/elements/color_picker_button/color_picker_button.html.erb

@@ -1,23 +1,24 @@
 <%= render component_tag(x: {
   data: x_data("appColorPickerButton", {selected: selected}),
-  "@dropdown:mount": "onDropdownMount()"
+  "@dropdown:mount": "onDropdownMount"
 }) do %> 
-  <%= input %>
-  <%= render button do |btn| %>
-    <% btn.with_icon do %>
-      <%= icon %>
-    <% end %>
+  <div x-effect="$dispatch('color-picker:change', {color: selectedColor})">
+    <%= render button do |btn| %>
+      <% btn.with_icon do %>
+        <%= icon %>
+      <% end %>
 
-    <% btn.with_dropdown do %>
-      <div
-        @color-picker:select="selectedColor = $event.detail.selectedColor;"
-        x-cloak>
-        <div data-role="color-picker">
-          <%= picker %>
+      <% btn.with_dropdown do %>
+        <div
+          @color-picker:select="selectedColor = $event.detail.selectedColor;"
+          x-cloak>
+          <div data-role="color-picker">
+            <%= picker %>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
 
-    <%= button_text %>
-  <% end %>
+      <%= button_text %>
+    <% end %>
+  </div>
 <% end %>

data/app/components/coco/app/elements/color_picker_button/color_picker_button.js

@@ -12,14 +12,6 @@ export default CocoComponent("appColorPickerButton", ({ selected }) => {
       );
     },
 
-    get selectedColorHex() {
-      return this.selectedColor && this.selectedColor.replace("#", "");
-    },
-
-    set selectedColorHex(value) {
-      this.selectedColor == "#" + value.replace("#", "");
-    },
-
     onDropdownMount() {
       this.getPicker().setSelectedColor(this.selectedColor);
     },

data/app/components/coco/app/elements/color_picker_button/color_picker_button.rb

@@ -26,7 +26,7 @@ module Coco
         end
 
         renders_one :icon, ->(&block) do
-          tag.span class: "picker-icon", ":style": "{color: selectedColor}", &block
+          tag.span class: "picker-icon", style: "color: #{@selected}", ":style": "{color: selectedColor}", &block
         end
 
         before_render do
@@ -40,26 +40,13 @@ module Coco
 
         attr_reader :selected
 
-        def initialize(selected: nil, input_name: nil, form_builder: nil, **kwargs)
+        def initialize(selected: nil, **kwargs)
           @selected = selected
 
           @size = kwargs.fetch(:size, :default)&.to_sym
           if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
             @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
           end
-
-          @form_builder = form_builder
-          @input_name = input_name
-        end
-
-        def input
-          if @input_name
-            if @form_builder
-              @form_builder.hidden_field(@input_name, value: @selected, "x-model": "selectedColorHex")
-            else
-              hidden_field_tag(@input_name, @selected, "x-model": "selectedColorHex")
-            end
-          end
         end
 
         def button_text

data/app/components/coco/app/elements/image_picker/image_picker.html.erb

@@ -1,4 +1,4 @@
-<%= render component_tag(x: {data: x_data("appImagePicker", alpine_props), ":class": "hasImage && 'has-image'"}) do %>  
+<%= render component_tag(x: {data: x_data("appImagePicker", {src: src}), ":class": "hasImage && 'has-image'"}) do %>  
   <div class="picker-file-name" x-show="hasImage">
     <label x-text="name"></label>
   </div>
@@ -6,7 +6,7 @@
     <%= render Coco::ImageUploader.new(
       **uploader_args,
       click: false) do %>
-      <div class="picker-blank-state" x-show="!fileData">
+      <div class="picker-blank-state" x-show="!$parent.src">
         <% if blank_state_text? %>
           <div class="picker-placeholder-text">
             <%= blank_state_text %>
@@ -18,8 +18,8 @@
           <% end %>
         </div>
       </div>
-      <div x-show="fileData" x-cloak>
-        <img :src="fileData" class="picker-thumbnail">
+      <div x-show="$parent.src" x-cloak>
+        <img :src="$parent.src" class="picker-thumbnail">
       </div>
     <% end %>
   </div>

data/app/components/coco/app/elements/image_picker/image_picker.js

@@ -1,17 +1,23 @@
 import { CocoComponent } from "@js/coco";
 import { getComponent } from "@helpers/alpine";
+import { basename } from "@helpers/path";
 
-export default CocoComponent("appImagePicker", ({ image }) => {
+export default CocoComponent("appImagePicker", ({ src }) => {
   return {
     use: [],
-    image: null,
+
+    image: {
+      name: basename(src),
+      file: null,
+      data: src,
+    },
 
     get name() {
-      return this.image && this.image.name;
+      return this.image.name;
     },
 
     get src() {
-      return this.image && this.image.data;
+      return this.image.data;
     },
 
     get hasImage() {
@@ -23,8 +29,14 @@ export default CocoComponent("appImagePicker", ({ image }) => {
     },
 
     setImage(file, silent = false) {
-      this.image = file;
+      this.image = {
+        file: file.file,
+        name: file.name,
+        data: file.data,
+      };
+
       this.uploader.setFile(file);
+
       if (silent === false) {
         this.$dispatch("image-picker:select", { image: this.image });
       }
@@ -32,7 +44,7 @@ export default CocoComponent("appImagePicker", ({ image }) => {
 
     clearImage(silent = false) {
       this.uploader.clear();
-      this.image = null;
+      this.image = { name: null, data: null, file: null };
       if (silent === false) {
         this.$dispatch("image-picker:clear");
       }