coveragebook_components 0.16.0 → 0.17.0

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

@@ -1,269 +0,0 @@
-import { CocoComponent } from "@assets/js/coco/component";
-import { getData } from "@helpers/alpine";
-import { captureElementScreenshot } from "@helpers/screenshot";
-import { isDark } from "@helpers/color";
-import { wasSuccessful } from "@helpers/turbo_events";
-
-export default CocoComponent("appSlideEditor", (data) => {
-  const initialData = {
-    layout: data.layout,
-    title: data.title,
-    text1: data.text1,
-    text2: data.text2,
-    bgColor: data.bgColor,
-    textColor: data.textColor,
-    bgImage: {
-      name: data.bgImage,
-      data: data.bgImage,
-    },
-    image1: {
-      name: data.image1,
-      data: data.image1,
-    },
-    image2: {
-      name: data.image2,
-      data: data.image2,
-    },
-  };
-
-  return {
-    ...initialData,
-
-    saved: { ...initialData },
-
-    saving: false,
-    ready: false,
-    dragging: false,
-    errors: [],
-
-    thumbnailFile: null,
-
-    get bgImagePicker() {
-      return getData(this.$root.querySelector("[data-role='bg-image-picker']"));
-    },
-
-    get layoutPicker() {
-      return getData(this.$root.querySelector("[data-role='layout-picker']"));
-    },
-
-    init() {
-      this.$watch("errors", (errors) => {
-        errors.forEach((error) => console.error(error.message)); // TODO display errors properly!
-      });
-
-      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)
-          );
-        });
-
-        // Stop navigation when changes have not been saved
-        this.$watch("history.undoable", (undoable) => {
-          if (undoable) {
-            window.onbeforeunload = () => true;
-          } else {
-            window.onbeforeunload = null;
-          }
-        });
-
-        this.ready = true;
-      });
-    },
-
-    undo(name, value) {
-      this[name] = value;
-      this.$nextTick(() => this.updateTextareaSizes());
-    },
-
-    redo(name, value) {
-      this[name] = value;
-      this.$nextTick(() => this.updateTextareaSizes());
-    },
-
-    updateTextareaSizes() {
-      const inputs = this.$root.querySelectorAll(
-        "[data-component='seamless-textarea']"
-      );
-      Array.from(inputs).forEach((el) => getData(el).onResize());
-    },
-
-    setLayout(layout) {
-      this.layout = layout;
-    },
-
-    handleImageDrop(event) {
-      this.dragging = false;
-
-      if (this.bgImagePicker) {
-        this.bgImagePicker.handleExternalDrop(event);
-      } else {
-        event.preventDefault();
-      }
-    },
-
-    async save() {
-      this.clearErrors();
-      this.saving = true;
-
-      if (this.$refs.thumbnail) {
-        try {
-          await this._generateThumbnail();
-        } catch (error) {
-          this.thumbnailFile = null;
-          message = error.message || "Error generating slide thumbnail";
-          this.handleSaveError(message, { error });
-          return;
-        }
-      }
-
-      const form = this.$refs.form && this.$refs.form.querySelector("form");
-
-      if (form && form.dataset.submit !== "false") {
-        const submitButton = form.querySelector("[type='submit']");
-        if (submitButton) {
-          submitButton.click();
-        } else {
-          this.handleSaveError("Slide form is missing a submit button");
-        }
-      } else {
-        this.submitSuccess();
-      }
-    },
-
-    submitEnd($event) {
-      this[wasSuccessful($event) ? "submitSuccess" : "submitError"]($event);
-    },
-
-    submitSuccess($event) {
-      this.history.clear();
-      this._fields.forEach((name) => (this.saved[name] = this[name]));
-      this.saving = false;
-
-      console.info("Slide changes saved");
-      this.$dispatch("slide:save-end", { success: true });
-    },
-
-    submitError($event) {
-      const message = "Error saving slide - form could not be submitted";
-      this.handleSaveError(message, { event: $event });
-    },
-
-    directUploadError($event) {
-      $event.preventDefault(); // prevent generic alert dialog error
-
-      const message = $event.detail.error || "Error uploading file to storage";
-      this.handleSaveError(message, { event: $event });
-    },
-
-    handleSaveError(message = "Error saving slide", context = {}) {
-      this.errors.push({ message, context });
-      this.saving = false;
-
-      this.$dispatch("slide:save-end", { success: false });
-    },
-
-    clearErrors() {
-      this.errors.length = 0;
-    },
-
-    syncFileInput(input, file) {
-      const dataTransfer = new DataTransfer();
-      if (file && file instanceof File) {
-        dataTransfer.items.add(file);
-      }
-      input.files = dataTransfer.files;
-    },
-
-    handleSlideClick(event) {
-      if (Array.from(event.target.classList).includes("slide-text")) {
-        event.target.querySelector("textarea").focus();
-      }
-    },
-
-    get blankTextAreasList() {
-      return ["title", "text1", "text2"]
-        .map((textareaName) => (this[textareaName] === "" ? textareaName : ""))
-        .join(" ")
-        .trim();
-    },
-
-    get hasBgImage() {
-      return !!(this.bgImage && this.bgImage.data);
-    },
-
-    get hasImage1() {
-      return !!(this.image1 && this.image1.data);
-    },
-
-    get hasImage2() {
-      return !!(this.image2 && this.image2.data);
-    },
-
-    get bgColorHex() {
-      return this.bgColor.replace("#", "");
-    },
-
-    get textColorHex() {
-      return this.textColor.replace("#", "");
-    },
-
-    get isDarkBg() {
-      return this.hasBgImage || this.bgColor ? isDark(this.bgColor) : false;
-    },
-
-    get _fields() {
-      return Object.keys(initialData);
-    },
-
-    async _generateThumbnail() {
-      this.thumbnailFile = await captureElementScreenshot(
-        this.$refs.thumbnail.firstElementChild,
-        "slide-thumbnail"
-      );
-
-      console.info(
-        "Slide thumbnail generated",
-        `${this.thumbnailFile.size / 1000}KiB`
-      );
-    },
-
-    /* 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,
-        };
-      },
-      [":data-layout"]: "layout",
-    },
-
-    input: {
-      layout: { "x-model.fill": "layout.replace(/-/g,'_')" },
-      title: { "x-model.fill": "title" },
-      text1: { "x-model.fill": "text1" },
-      text2: { "x-model.fill": "text2" },
-      bgColor: { "x-model.fill": "bgColorHex" },
-      textColor: { "x-model.fill": "textColorHex" },
-      bgImage: { "x-effect": "syncFileInput($el, bgImage.file)" },
-      bgImagePurge: { ":checked": "!hasBgImage" },
-      image1: { "x-effect": "syncFileInput($el, image1.file)" },
-      image1Purge: { ":checked": "!hasImage1" },
-      image2: { "x-effect": "syncFileInput($el, image2.file)" },
-      image2Purge: { ":checked": "!hasImage2" },
-      thumbnailImage: { "x-effect": "syncFileInput($el, thumbnailFile)" },
-    },
-  };
-});

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

@@ -1,114 +0,0 @@
-module Coco
-  module App
-    class SlideEditor < Coco::Component
-      include Coco::AppComponentsHelper
-      include Coco::BookComponentsHelper
-      include Coco::FormatHelper
-
-      DEFAULT_LAYOUT = "one-col-title"
-
-      renders_one :title, ->(value = nil, **textarea_options) do
-        Coco::SeamlessTextarea.new(**textarea_options,
-          value: value,
-          multiline: false,
-          focus: true,
-          data: {role: "title-editor"},
-          x: {modelable: "value", model: "title"})
-      end
-
-      renders_one :text_1, ->(value = nil, **textarea_options) do
-        Coco::SeamlessTextarea.new(**textarea_options,
-          value: value,
-          multiline: true,
-          data: {role: "text-1-editor"},
-          x: {modelable: "value", model: "text1"})
-      end
-
-      renders_one :text_2, ->(value = nil, **textarea_options) do
-        Coco::SeamlessTextarea.new(**textarea_options,
-          value: value,
-          multiline: true,
-          data: {role: "text-2-editor"},
-          x: {modelable: "value", model: "text2"})
-      end
-
-      renders_one :image_1, ->(src = nil, **image_options) do
-        @image_1_options = {src: src, **image_options}
-      end
-
-      renders_one :image_2, ->(src = nil, **image_options) do
-        @image_2_options = {src: src, **image_options}
-      end
-
-      renders_one :bg_color, ->(value = nil, **input_options) do
-        @bg_color_options = {selected: value, **input_options}
-      end
-
-      renders_one :text_color, ->(value = nil, **input_options) do
-        @text_color_options = {selected: value, **input_options}
-      end
-
-      renders_one :bg_image, ->(src = nil, **input_options) do
-        @bg_image_options = {src: src, **input_options}
-      end
-
-      renders_one :layout, ->(value = DEFAULT_LAYOUT, **input_options) do
-        @layout_options = {selected: value&.to_s&.tr("_", "-"), **input_options}
-      end
-
-      def initialize(generate_thumbnail: true, **kwargs)
-        @generate_thumbnail = generate_thumbnail
-      end
-
-      def generate_thumbnail? = @generate_thumbnail
-
-      def slide_args
-        {
-          bg_image: bg_image_src,
-          bg_color_hex: bg_color_css,
-          text_color_hex: text_color_css,
-          layout: current_layout,
-          render_empty: true
-        }
-      end
-
-      def alpine_props
-        {
-          bg_color: bg_color_css,
-          text_color: text_color_css,
-          title: title&.value,
-          text_1: text_1&.value,
-          text_2: text_2&.value,
-          image_1: image_1_src,
-          image_2: image_2_src,
-          bg_image: bg_image_src,
-          layout: current_layout
-        }
-      end
-
-      def bg_color_css
-        @bg_color_options[:selected] if @bg_color_options
-      end
-
-      def text_color_css
-        @text_color_options[:selected] if @text_color_options
-      end
-
-      def bg_image_src
-        @bg_image_options[:src] if @bg_image_options
-      end
-
-      def image_1_src
-        @image_1_options[:src] if @image_1_options
-      end
-
-      def image_2_src
-        @image_2_options[:src] if @image_2_options
-      end
-
-      def current_layout
-        @layout_options&.fetch(:selected, DEFAULT_LAYOUT) || DEFAULT_LAYOUT
-      end
-    end
-  end
-end

data/app/components/coco/book/editable_slide/editable_slide.css

@@ -1,332 +0,0 @@
-@layer components {
-  [data-coco][data-component="book-editable-slide"] {
-    /* 
-     * slide-padding-lg at max (1480px): 240px (16.2%)
-     * slide-padding-lg at min (320px): 16.2% x 320px = 52px
-     */
-    --slide-padding-lg: clamp(52px, 16.2cqw, 240px);
-
-    /* 
-     * slide-padding-md at max (1480px): 120px (8.1%)
-     * slide-padding-md at min (320px): 8.1% x 320px = 26px
-     */
-    --slide-padding-md: clamp(26px, 8.1cqw, 120px);
-
-    /* 
-     * slide-padding-sm at max (1480px): 80px (5.4%)
-     * slide-padding-sm at min (320px): 5.4% x 320px = 17px
-     */
-    --slide-padding-sm: max(24px, clamp(17px, 5.4cqw, 80px));
-
-    /* Visually-adjusted small padding size for grid gap and header spacing */
-    --slide-padding-sm-internal: max(20px, clamp(16px, 4.9cqw, 72px));
-
-    /* 
-     * Small title font size at max (1480px): 64px (4.3%)
-     * Small title font size at min (320px): 4.3% x 320px = 13.8px
-     */
-    --title-font-size: max(
-      32px,
-      clamp(13.8px, 4.3cqw, theme(fontSize.display-3))
-    );
-
-    /* 
-     * Text font size at max (1480px): 24px / 1.62%
-     * Text font size at min (320px): 1.62% x 320px = 5.2px
-     */
-    --text-font-size: max(12px, clamp(6.1px, 1.86cqw, 28px));
-
-    /* ------------- */
-
-    @apply relative rounded-md @container;
-    @apply bg-white bg-no-repeat bg-cover bg-center;
-
-    min-width: 320px;
-
-    .slide-aspect {
-      @apply @slide-fluid:aspect-slide min-h-[62.5cqw] grid grid-cols-1 grid-rows-1;
-    }
-
-    .slide-container {
-      @apply @slide-fluid:absolute @slide-fluid:inset-0 overflow-hidden;
-      @apply px-6 py-10 @slide-fluid:px-[var(--slide-padding-md)] @slide-fluid:py-[var(--slide-padding-md)];
-    }
-
-    .slide-layout {
-      @apply @slide-fluid:grid h-full w-full;
-    }
-
-    .slide-header,
-    .slide-text,
-    .slide-media {
-      @apply hidden;
-    }
-
-    .slide-group {
-      @apply contents;
-    }
-
-    .slide-header {
-      @apply w-full;
-    }
-
-    .slide-title {
-      @apply font-bold text-current w-full;
-      overflow-wrap: anywhere;
-      line-height: 1.1;
-      font-size: var(--title-font-size);
-    }
-
-    .slide-text {
-      @apply text-current text-base w-full overflow-hidden;
-      line-height: 1.5;
-    }
-
-    .slide-media {
-      @apply w-full text-current relative text-base;
-    }
-
-    @container (min-width: 700px) {
-      .slide-text,
-      .slide-media {
-        font-size: var(--text-font-size);
-      }
-    }
-
-    .slide-media-wrapper {
-      @apply @slide-fluid:absolute @slide-fluid:inset-0 @slide-fluid:w-full @slide-fluid:h-full;
-
-      img {
-        @apply w-full h-full object-contain object-center;
-      }
-    }
-
-    /* layouts */
-
-    &[data-layout="one-col-title"] {
-      /* 
-       * Title font size at max (1480px): 80px (5.4%)
-       * Title font size at min (320px): 5.4% x 320px = 17px
-       */
-      --title-font-size: max(
-        38px,
-        clamp(17px, 5.4cqw, theme(fontSize.display-2))
-      );
-
-      /* 
-       * Text font size at max (1480px): 32px / 2.16%
-       * Text font size at min (320px): 2.16% x 320px = 7px
-       */
-      --text-font-size: max(
-        15px,
-        clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
-      );
-
-      .slide-container {
-        @apply py-12 @slide-fluid:px-[var(--slide-padding-lg)] @slide-fluid:py-[var(--slide-padding-md)];
-      }
-
-      .slide-layout {
-        @apply mx-auto max-w-[475px] @slide-fluid:max-w-full;
-        grid-template-areas: "content";
-      }
-
-      [data-role="group-primary-text"] {
-        @apply flex flex-col items-center justify-center text-center h-full;
-        grid-area: content;
-      }
-
-      [data-role="header"],
-      [data-role="text-primary"] {
-        @apply block;
-      }
-
-      .slide-text {
-        line-height: 1.4;
-      }
-
-      &.with-title .slide-text {
-        margin-top: 0.875em;
-      }
-    }
-
-    &[data-layout="one-col-text"] {
-      .slide-container {
-        @apply py-10 @slide-fluid:py-[var(--slide-padding-sm)];
-      }
-
-      .slide-layout {
-        @apply @slide-fluid:py-[4.8cqw];
-        grid-template-areas: "content";
-        grid-template-rows: auto;
-      }
-
-      &.with-title .slide-layout {
-        @apply py-0;
-        grid-template-areas:
-          "header"
-          "content";
-        grid-template-rows: min-content auto;
-        grid-gap: var(--slide-padding-sm-internal);
-      }
-
-      [data-role="header"],
-      [data-role="text-primary"] {
-        @apply block;
-      }
-
-      [data-role="header"] {
-        grid-area: header;
-        @apply mb-5 @slide-fluid:mb-0;
-      }
-
-      [data-role="text-primary"] {
-        grid-area: content;
-      }
-    }
-
-    &[data-layout="one-col-media"] {
-      .slide-container {
-        @apply p-6 @slide-fluid:p-[var(--slide-padding-sm)];
-      }
-
-      .slide-layout {
-        grid-template-areas: "content";
-        grid-template-rows: 100%;
-      }
-
-      [data-role="media-primary"] {
-        @apply block h-full;
-        grid-area: content;
-      }
-
-      .slide-media-wrapper {
-        @apply h-full;
-      }
-    }
-
-    &[data-layout="two-col-mixed"] {
-      .slide-container {
-        @apply py-10 @slide-fluid:p-[var(--slide-padding-md)];
-      }
-
-      .slide-layout {
-        grid-template-areas: "text media";
-        grid-template-rows: 100%;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: var(--slide-padding-sm-internal);
-      }
-
-      [data-role="header"],
-      [data-role="text-primary"],
-      [data-role="media-primary"],
-      [data-role="group-primary-text"] {
-        @apply block;
-      }
-
-      [data-role="group-primary-text"] {
-        grid-area: text;
-        @apply @slide-fluid:flex @slide-fluid:flex-col @slide-fluid:justify-center @slide-fluid:h-full;
-      }
-
-      [data-role="media-primary"] {
-        @apply mt-6 @slide-fluid:mt-0;
-        grid-area: media;
-      }
-
-      &.with-title .slide-text {
-        margin-top: 0.875em;
-      }
-    }
-
-    &[data-layout="two-col-text"] {
-      .slide-container {
-        @apply py-10 @slide-fluid:p-[var(--slide-padding-sm)];
-      }
-
-      .slide-layout {
-        @apply @slide-fluid:py-[4.8cqw];
-        grid-template-areas: "primary secondary";
-        grid-template-rows: auto;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: var(--slide-padding-sm-internal);
-      }
-
-      &.with-title .slide-layout {
-        @apply py-0;
-        grid-template-areas:
-          "header header"
-          "primary secondary";
-        grid-template-rows: min-content auto;
-      }
-
-      [data-role="header"],
-      [data-role="text-primary"],
-      [data-role="text-secondary"] {
-        @apply block;
-      }
-
-      [data-role="header"] {
-        grid-area: header;
-      }
-
-      [data-role="text-primary"] {
-        grid-area: primary;
-      }
-
-      [data-role="text-secondary"] {
-        grid-area: secondary;
-      }
-
-      .slide-header,
-      [data-role="text-primary"] {
-        @apply mb-6 @slide-fluid:mb-0;
-      }
-    }
-
-    &[data-layout="two-col-media"] {
-      .slide-container {
-        @apply py-10 @slide-fluid:p-[var(--slide-padding-sm)];
-      }
-
-      .slide-layout {
-        @apply @slide-fluid:py-[4.8cqw];
-        grid-template-areas: "primary secondary";
-        grid-template-rows: auto;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: var(--slide-padding-sm-internal);
-      }
-
-      &.with-title .slide-layout {
-        @apply py-0;
-        grid-template-areas:
-          "header header"
-          "primary secondary";
-        grid-template-rows: min-content auto;
-      }
-
-      [data-role="header"],
-      [data-role="media-primary"],
-      [data-role="media-secondary"] {
-        @apply block;
-      }
-
-      [data-role="header"] {
-        grid-area: header;
-      }
-
-      [data-role="media-primary"] {
-        grid-area: primary;
-      }
-
-      [data-role="media-secondary"] {
-        grid-area: secondary;
-      }
-
-      .slide-header,
-      [data-role="media-primary"] {
-        @apply mb-6 @slide-fluid:mb-0;
-      }
-    }
-  }
-}