coveragebook_components 0.5.7 → 0.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 659228f5bee7137d83a98ee0c7b1391a492a7c2a90533ec428d4be4771eac5be
-  data.tar.gz: cd05d30bfb21b8bbe169615f5d061cac481de84ce6dc9f2080d8a5c40be77f96
+  metadata.gz: 315f0f67e3808e47c30ec505efd02020e73b65f2aac7cf701bc76d2029a8d171
+  data.tar.gz: 9d19868c18f41453cd836f428f824aba86d38a56aaab912445f8669cdb63501f
 SHA512:
-  metadata.gz: f13bcbb0021c35bfa9b5eca89471a718e8b17e0cadf78572266da7567865ebd2ee1501188976ce45fb788598cc54f5c7f7a36ea6855bd8f41abce29d73451bf2
-  data.tar.gz: b84c1b8db37c0584d6e922325bdc65c883b2f8d764b95bbe457ceaaab82f08b880955be4088432688bf812ab8e20510d5e24e071a6bb2b1e6af570131958893d
+  metadata.gz: 1547b2a38d2679ae85f38e357aca2eb2d875a612bf7872cbbcfd757780f08d05280d45b1888b5c81f22ab8ec05d48c5773c86d95b13c9d1985aa1d3390482c04
+  data.tar.gz: e7226e32fd18f1abe188a69e6024f330b1a70d8f6327ad35c9817d7713a5532220ca8ed677b244434c8c4f1ef823e6493d4757fcf7c71aed59eea9b829d93a75

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

@@ -1104,6 +1104,8 @@ select{
     margin-bottom: 1.5rem}}
 [data-coco][data-component="app-slide-editor"] .editor-form form{
   display: none}
+[data-coco][data-component="app-slide-editor"] .slide-media{
+  position: relative}
 [data-coco][data-component="app-slide-editor"] .editor-slide{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1111,6 +1113,97 @@ select{
 [data-coco][data-component="app-slide-editor"] .editor-slide textarea{
   width: 100%;
   flex: none}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader{
+  position: relative;
+  height: 100%;
+  width: 100%}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-foreground-image{
+  position: relative;
+  height: 100%;
+  width: 100%;
+  transition-property: outline-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 100ms}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-foreground-image:hover{
+  outline-style: solid;
+  outline-width: 1px;
+  outline-offset: 0px;
+  outline-color: transparent}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-foreground-image img{
+  height: 100%;
+  width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
+  inset: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center}
+@supports (aspect-ratio: 1 / 1){
+
+  [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
+    aspect-ratio: 4/3}}
+@supports not (aspect-ratio: 1 / 1){
+
+  [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::before{
+    content: "";
+    float: left;
+    padding-top: calc(100% / (4/3))}
+
+  [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::after{
+    clear: left;
+    content: "";
+    display: block}}
+@container (min-width: 700px){
+
+  [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
+    position: absolute}
+
+  @supports (aspect-ratio: 1 / 1){
+
+    [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
+      aspect-ratio: auto}}
+
+  @supports not (aspect-ratio: 1 / 1){
+
+    [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::before{
+      content: "";
+      float: left;
+      padding-top: calc(100% / (auto))}
+
+    [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::after{
+      clear: left;
+      content: "";
+      display: block}}}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
+  outline-style: solid;
+  outline-width: 1px;
+  outline-offset: 0px;
+  outline-color: transparent;
+        background-color: rgba(255, 255, 255, 0.1)}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder .coco-icon{
+  color: currentColor;
+          width: 3em;
+          height: 3em;
+          margin-bottom: 0.6em}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder .coco-icon,
+        [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder .editor-image-upload-placeholder-text{
+  opacity: 0.5}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-toolbar{
+  position: absolute;
+  left: 50%;
+  top: 0px;
+  --tw-translate-x: -50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 100ms}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader:hover .editor-image-upload-toolbar{
+  opacity: 1}
 [data-coco][data-component="app-slide-editor"] .coco-button.editor-saving{
   cursor: not-allowed}
 [data-coco][data-component="app-slide-editor"] .editor-thumbnail-wrapper{
@@ -1122,7 +1215,13 @@ select{
   position: absolute;
   top: 0px;
   z-index: -1000;
-  width: 500px}
+  width: 780px}
+[data-coco][data-component="app-slide-editor"] .editor-thumbnail-image{
+  height: 100%;
+  width: 100%;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat}
 [data-coco][data-component="app-slide-editor"] .editor-icon-bg-color{
   fill: currentColor;
   stroke: #111827;
@@ -1131,19 +1230,36 @@ select{
   outline-style: solid;
   outline-width: 1px;
   outline-offset: 0px;
-  outline-color: transparent}
+  outline-color: transparent;
+  transition-property: outline-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 100ms}
 [data-coco][data-component="app-slide-editor"] [data-component="app-seamless-textarea"] textarea::-moz-placeholder{
   font-style: italic}
 [data-coco][data-component="app-slide-editor"] [data-component="app-seamless-textarea"] textarea::placeholder{
   font-style: italic}
+[data-coco][data-component="app-slide-editor"] .slide-bg-light .editor-foreground-image,
+      [data-coco][data-component="app-slide-editor"] .slide-bg-light .editor-image-upload-placeholder {
+        outline-color: rgba(0, 0, 0, 0.3) !important;
+      }
+[data-coco][data-component="app-slide-editor"] .slide-bg-light .editor-image-upload-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity))}
 [data-coco][data-component="app-slide-editor"] .slide-bg-light [data-component="app-seamless-textarea"] textarea:hover,
-        [data-coco][data-component="app-slide-editor"] .slide-bg-light [data-component="app-seamless-textarea"] textarea:focus {
-          outline-color: rgba(0, 0, 0, 0.3);
-        }
+          [data-coco][data-component="app-slide-editor"] .slide-bg-light [data-component="app-seamless-textarea"] textarea:focus {
+            outline-color: rgba(0, 0, 0, 0.3);
+          }
+[data-coco][data-component="app-slide-editor"] .slide-bg-dark .editor-foreground-image,
+      [data-coco][data-component="app-slide-editor"] .slide-bg-dark .editor-image-upload-placeholder {
+        outline-color: rgba(255, 255, 255, 0.3) !important;
+      }
+[data-coco][data-component="app-slide-editor"] .slide-bg-dark .editor-image-upload-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity))}
 [data-coco][data-component="app-slide-editor"] .slide-bg-dark [data-component="app-seamless-textarea"] textarea:hover,
-        [data-coco][data-component="app-slide-editor"] .slide-bg-dark [data-component="app-seamless-textarea"] textarea:focus {
-          outline-color: rgba(255, 255, 255, 0.3);
-        }
+          [data-coco][data-component="app-slide-editor"] .slide-bg-dark [data-component="app-seamless-textarea"] textarea:focus {
+            outline-color: rgba(255, 255, 255, 0.3);
+          }
 [data-coco][data-component="app-alert"]{
   overflow: hidden;
   border-radius: 0.75rem;
@@ -3164,6 +3280,8 @@ select{
 
     background-size: cover;
 
+    background-position: center;
+
     background-repeat: no-repeat;
 
     min-width: 320px;
@@ -3210,7 +3328,7 @@ select{
 [data-coco][data-component="book-editable-slide"] [data-slide-region],
     [data-coco][data-component="book-editable-slide"] .slide-header,
     [data-coco][data-component="book-editable-slide"] .slide-text,
-    [data-coco][data-component="book-editable-slide"] .slide-image{
+    [data-coco][data-component="book-editable-slide"] .slide-media{
   display: none}
 [data-coco][data-component="book-editable-slide"] .slide-group{
   display: contents}
@@ -3225,7 +3343,9 @@ select{
       line-height: 1.5;
       font-size: var(--text-font-size)}
 [data-coco][data-component="book-editable-slide"] .slide-media{
-  width: 100%}
+  width: 100%;
+  color: currentColor;
+      font-size: var(--text-font-size)}
 [data-coco][data-component="book-editable-slide"] .slide-media img{
   height: 100%;
   width: 100%;
@@ -3292,6 +3412,14 @@ select{
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-text {
         line-height: 1.4;
       }
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem}
+@container (min-width: 700px){
+
+  [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
+    padding-top: var(--slide-padding-sm);
+    padding-bottom: var(--slide-padding-sm)}}
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
   display: flex;
   align-items: center}
@@ -3326,13 +3454,11 @@ select{
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-slide-region="content-1"] .slide-text{
   display: block}
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container{
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem}
+  padding: 1.5rem}
 @container (min-width: 700px){
 
   [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container{
-    padding-top: var(--slide-padding-sm);
-    padding-bottom: var(--slide-padding-sm)}}
+    padding: var(--slide-padding-sm)}}
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-layout,
       [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-content{
   height: 100%}
@@ -3392,21 +3518,15 @@ select{
       [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"],
       [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"]{
   display: block}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"] .slide-media,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"] .slide-media,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] .slide-media,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] .slide-media{
-  display: block}
 [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"]{
   margin-bottom: var(--slide-padding-sm)}
 @container (min-width: 700px){
 
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"]{
-    margin-bottom: 0px}
+    margin-bottom: 0px}}
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-text{
+  display: block}
+@container (min-width: 700px){
 
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout{
     height: 100%}}
@@ -3417,7 +3537,10 @@ select{
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-content{
     display: flex;
     height: 100%;
-    align-items: center}
+    align-items: center}}
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media{
+  display: block}
+@container (min-width: 700px){
 
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media{
     position: absolute;

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

@@ -14604,7 +14604,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.5.7",
+    version: "0.6.1",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",
@@ -29276,7 +29276,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       confirmed: true,
       lastState: null,
       stateTooltips: data2.tooltips || {},
-      tooltipText: null
+      tooltipText: null,
+      dropdown: null
     }, data2.props || {}), {
       init() {
         this.lastState = this.state;
@@ -29316,6 +29317,17 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       set disabled(value) {
         this.$options.disabled = value;
       },
+      /* dropdown */
+      hideDropdown() {
+        if (this.dropdown) {
+          this.dropdown.hide();
+        }
+      },
+      showDropdown() {
+        if (this.dropdown) {
+          this.dropdown.show();
+        }
+      },
       /* confirmation */
       checkConfirmation(event) {
         if (!this.confirmed) {
@@ -29665,11 +29677,20 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       layout: data2.layout,
       title: data2.title,
       text1: data2.text1,
+      text2: data2.text2,
       bgColor: data2.bgColor,
       textColor: data2.textColor,
       bgImage: {
         name: data2.bgImage,
         data: data2.bgImage
+      },
+      image1: {
+        name: data2.image1,
+        data: data2.image1
+      },
+      image2: {
+        name: data2.image2,
+        data: data2.image2
       }
     };
     return __spreadProps(__spreadValues({
@@ -29684,6 +29705,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       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((error2) => console.error(error2.message));
@@ -29712,6 +29736,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         );
         Array.from(inputs).forEach((el) => getData(el).onResize());
       },
+      setLayout(layout) {
+        this.layout = layout;
+      },
       handleImageDrop(event) {
         this.dragging = false;
         if (this.bgImagePicker) {
@@ -29782,6 +29809,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       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("#", "");
       },
@@ -29818,16 +29851,22 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             "slide-bg-dark": this.isDarkBg,
             "slide-bg-light": !this.isDarkBg
           };
-        }
+        },
+        [":data-layout"]: "layout"
       },
       input: {
-        layout: { "x-model.fill": "layout" },
+        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)" }
       }
     });
@@ -31883,7 +31922,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           this.$root.querySelector("[data-role='layout-picker']").firstElementChild
         );
       },
-      onDropdownMount() {
+      getButton() {
+        return getData(this.$root.querySelector(".layout-picker-trigger"));
+      },
+      init() {
+        this.$watch("selectedLayout", () => this.getButton().hideDropdown());
       }
     };
   });

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

@@ -783,6 +783,8 @@ select {
 
     background-size: cover;
 
+    background-position: center;
+
     background-repeat: no-repeat;
 
     min-width: 320px;
@@ -842,7 +844,7 @@ select {
 [data-coco][data-component="book-editable-slide"] [data-slide-region],
     [data-coco][data-component="book-editable-slide"] .slide-header,
     [data-coco][data-component="book-editable-slide"] .slide-text,
-    [data-coco][data-component="book-editable-slide"] .slide-image {
+    [data-coco][data-component="book-editable-slide"] .slide-media {
   display: none;
 }
 [data-coco][data-component="book-editable-slide"] .slide-group {
@@ -862,6 +864,8 @@ select {
 }
 [data-coco][data-component="book-editable-slide"] .slide-media {
   width: 100%;
+  color: currentColor;
+      font-size: var(--text-font-size);
 }
 [data-coco][data-component="book-editable-slide"] .slide-media img {
   height: 100%;
@@ -940,6 +944,17 @@ select {
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-text {
         line-height: 1.4;
       }
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+@container (min-width: 700px) {
+
+  [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
+    padding-top: var(--slide-padding-sm);
+    padding-bottom: var(--slide-padding-sm);
+  }
+}
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container {
   display: flex;
   align-items: center;
@@ -985,14 +1000,12 @@ select {
   display: block;
 }
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
+  padding: 1.5rem;
 }
 @container (min-width: 700px) {
 
   [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container {
-    padding-top: var(--slide-padding-sm);
-    padding-bottom: var(--slide-padding-sm);
+    padding: var(--slide-padding-sm);
   }
 }
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-layout,
@@ -1070,16 +1083,6 @@ select {
       [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] {
   display: block;
 }
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"] .slide-media,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"] .slide-media,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] .slide-media,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] .slide-media {
-  display: block;
-}
 [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] {
   margin-bottom: var(--slide-padding-sm);
 }
@@ -1088,6 +1091,11 @@ select {
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] {
     margin-bottom: 0px;
   }
+}
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-text {
+  display: block;
+}
+@container (min-width: 700px) {
 
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout {
     height: 100%;
@@ -1103,6 +1111,11 @@ select {
     height: 100%;
     align-items: center;
   }
+}
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media {
+  display: block;
+}
+@container (min-width: 700px) {
 
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media {
     position: absolute;

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

@@ -14962,7 +14962,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       confirmed: true,
       lastState: null,
       stateTooltips: data2.tooltips || {},
-      tooltipText: null
+      tooltipText: null,
+      dropdown: null
     }, data2.props || {}), {
       init() {
         this.lastState = this.state;
@@ -15002,6 +15003,17 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       set disabled(value) {
         this.$options.disabled = value;
       },
+      /* dropdown */
+      hideDropdown() {
+        if (this.dropdown) {
+          this.dropdown.hide();
+        }
+      },
+      showDropdown() {
+        if (this.dropdown) {
+          this.dropdown.show();
+        }
+      },
       /* confirmation */
       checkConfirmation(event) {
         if (!this.confirmed) {

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

@@ -12,6 +12,10 @@
       @apply hidden;
     }
 
+    .slide-media {
+      @apply relative;
+    }
+
     .editor-slide {
       @apply shadow-md;
 
@@ -20,6 +24,48 @@
       }
     }
 
+    .editor-foreground-image-uploader {
+      @apply h-full w-full relative;
+
+      .editor-foreground-image {
+        @apply h-full w-full relative transition-[outline-color] duration-100;
+
+        &:hover {
+          @apply outline outline-1 outline-transparent outline-offset-0;
+        }
+
+        img {
+          @apply w-full h-full object-contain;
+        }
+      }
+
+      .editor-image-upload-placeholder {
+        @apply inset-0 flex flex-col items-center justify-center text-center aspect-[4/3] @slide-fluid:aspect-auto @slide-fluid:absolute;
+        @apply outline outline-1 outline-transparent outline-offset-0;
+        background-color: rgba(255, 255, 255, 0.1);
+
+        .coco-icon {
+          @apply text-current;
+          width: 3em;
+          height: 3em;
+          margin-bottom: 0.6em;
+        }
+
+        .coco-icon,
+        .editor-image-upload-placeholder-text {
+          @apply opacity-50;
+        }
+      }
+
+      .editor-image-upload-toolbar {
+        @apply absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-100;
+      }
+
+      &:hover .editor-image-upload-toolbar {
+        @apply opacity-100;
+      }
+    }
+
     .coco-button.editor-saving {
       @apply cursor-not-allowed;
     }
@@ -29,7 +75,11 @@
     }
 
     .editor-thumbnail {
-      @apply absolute w-[500px] top-0 z-[-1000] pointer-events-none;
+      @apply absolute w-[780px] top-0 z-[-1000] pointer-events-none;
+    }
+
+    .editor-thumbnail-image {
+      @apply w-full h-full bg-contain bg-no-repeat bg-center;
     }
 
     .editor-icon-bg-color {
@@ -39,7 +89,7 @@
 
     [data-component="app-seamless-textarea"] {
       textarea {
-        @apply outline outline-1 outline-transparent outline-offset-0;
+        @apply outline outline-1 outline-transparent outline-offset-0 transition-[outline-color] duration-100;
 
         &::placeholder {
           @apply italic;
@@ -47,20 +97,42 @@
       }
     }
 
-    .slide-bg-light [data-component="app-seamless-textarea"] {
-      textarea {
-        &:hover,
-        &:focus {
-          outline-color: rgba(0, 0, 0, 0.3);
+    .slide-bg-light {
+      .editor-foreground-image,
+      .editor-image-upload-placeholder {
+        outline-color: rgba(0, 0, 0, 0.3) !important;
+      }
+
+      .editor-image-upload-placeholder {
+        @apply text-content-dark-1;
+      }
+
+      [data-component="app-seamless-textarea"] {
+        textarea {
+          &:hover,
+          &:focus {
+            outline-color: rgba(0, 0, 0, 0.3);
+          }
         }
       }
     }
 
-    .slide-bg-dark [data-component="app-seamless-textarea"] {
-      textarea {
-        &:hover,
-        &:focus {
-          outline-color: rgba(255, 255, 255, 0.3);
+    .slide-bg-dark {
+      .editor-foreground-image,
+      .editor-image-upload-placeholder {
+        outline-color: rgba(255, 255, 255, 0.3) !important;
+      }
+
+      .editor-image-upload-placeholder {
+        @apply text-content-light-1;
+      }
+
+      [data-component="app-seamless-textarea"] {
+        textarea {
+          &:hover,
+          &:focus {
+            outline-color: rgba(255, 255, 255, 0.3);
+          }
         }
       }
     }

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

@@ -5,6 +5,31 @@
   <div class="editor-toolbar">
     <%= coco_toolbar do |toolbar| %>
       <% toolbar.with_section do |section| %>
+        <% if layout? %>
+          <% section.with_layout_picker_button(
+            icon: :layout_template,
+            selected: current_layout,
+            wrapper: {
+              data: {
+                role: "layout-picker"
+              },
+              x: {
+                modelable: "selectedLayout",
+                model: "layout"
+              }
+            }
+          ) do |button| %>
+            <% button.with_layout(name: "one-col-title", thumbnail: "slides/one-col-title-layout") %>
+            <% button.with_layout(name: "two-col-mixed", thumbnail: "slides/two-col-mixed-layout") %>
+            <% button.with_layout(name: "one-col-media", thumbnail: "slides/one-col-media-layout") %>
+            <% button.with_layout(name: "two-col-media", thumbnail: "slides/two-col-media-layout") %>
+            <% button.with_layout(name: "one-col-text", thumbnail: "slides/one-col-text-layout") %>
+            <% button.with_layout(name: "two-col-text", thumbnail: "slides/two-col-text-layout") %>
+
+            <%= tt("layout_picker.label") %>
+          <% end %>
+        <% end %>
+
         <% if bg_color? %>
           <% section.with_color_picker_button(
             **@bg_color_options.to_h,
@@ -13,7 +38,8 @@
                 role: "bg-color-picker"
               },
               x: {
-                "@color-picker:change": "bgColor = $event.detail.color"
+                modelable: "selectedColor",
+                model: "bgColor"
               }
             }
           ) do |button| %>
@@ -36,7 +62,8 @@
                 role: "bg-image-picker"
               },
               x: {
-                "@image-picker:change": "bgImage = $event.detail.image"
+                modelable: "selectedImage",
+                model: "bgImage"
               }
             }
           ) do |button| %>
@@ -56,7 +83,8 @@
                 role: "text-color-picker"
               },
               x: {
-                "@color-picker:change": "textColor = $event.detail.color"
+                modelable: "selectedColor",
+                model: "textColor"
               }
             }
           ) do |button| %>
@@ -147,6 +175,64 @@
           <%= text_1 %>
         <% end %>
       <% end %>
+
+      <% if text_2? %>
+        <% slide.with_text_2 do %>
+          <%= text_2 %>
+        <% end %>
+      <% end %>
+
+      <% if image_1? %>
+        <% slide.with_image_1 do %>
+          <%= render Coco::ImageUploader.new(
+            class: "editor-foreground-image-uploader",
+            x: {
+              "@image-uploader:load": "image1 = $event.detail.file"
+            }
+          ) do %>
+            <div class="editor-foreground-image" x-show="hasImage1">
+              <%= coco_button_group(
+                theme: :toolbar,
+                floating: true,
+                class: "editor-image-upload-toolbar"
+              ) do |group| %>
+                <% group.with_button(icon: :trash_2, tooltip: "remove image", x: {"@click.stop": "image1 = {}"}) %>
+              <% end %>
+              <img :src="image1.data">
+            </div>
+            <div class="editor-image-upload-placeholder" x-show="!hasImage1">
+              <%= coco_icon(:image_plus) %>
+              <div class="editor-image-upload-placeholder-text">Add image</div>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if image_2? %>
+        <% slide.with_image_2 do %>
+          <%= render Coco::ImageUploader.new(
+            class: "editor-foreground-image-uploader",
+            x: {
+              "@image-uploader:load": "image2 = $event.detail.file"
+            }
+          ) do %>
+            <div class="editor-foreground-image" x-show="hasImage2">
+              <%= coco_button_group(
+                theme: :toolbar,
+                floating: true,
+                class: "editor-image-upload-toolbar"
+              ) do |group| %>
+                <% group.with_button(icon: :trash_2, tooltip: "remove image", x: {"@click.stop": "image2 = {}"}) %>
+              <% end %>
+              <img :src="image2.data">
+            </div>
+            <div class="editor-image-upload-placeholder" x-show="!hasImage2">
+              <%= coco_icon(:image_plus) %>
+              <div class="editor-image-upload-placeholder-text">Add image</div>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
     <% end %>
   </div>
  
@@ -174,6 +260,24 @@
               <span x-html="text1.replace(/\n/g, '<br>')"></span>
             <% end %>
           <% end %>
+
+          <% if text_2? %>
+            <% slide.with_text_2 do %>
+              <span x-html="text2.replace(/\n/g, '<br>')"></span>
+            <% end %>
+          <% end %>
+
+          <% if image_1? %>
+            <% slide.with_image_1 do %>
+              <div class="editor-thumbnail-image" :style="image2.data && `background-image: url('${image1.data}')`"></div>
+            <% end %>
+          <% end %>
+
+          <% if image_2? %>
+            <% slide.with_image_2 do %>
+              <div class="editor-thumbnail-image" :style="image2.data && `background-image: url('${image2.data}')`"></div>
+            <% end %>
+          <% end %>
         <% end %>
       </div>
     </div>

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

@@ -10,12 +10,21 @@ export default CocoComponent("appSlideEditor", (data) => {
     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 {
@@ -36,6 +45,10 @@ export default CocoComponent("appSlideEditor", (data) => {
       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!
@@ -70,6 +83,10 @@ export default CocoComponent("appSlideEditor", (data) => {
       Array.from(inputs).forEach((el) => getData(el).onResize());
     },
 
+    setLayout(layout) {
+      this.layout = layout;
+    },
+
     handleImageDrop(event) {
       this.dragging = false;
 
@@ -157,6 +174,14 @@ export default CocoComponent("appSlideEditor", (data) => {
       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("#", "");
     },
@@ -203,16 +228,22 @@ export default CocoComponent("appSlideEditor", (data) => {
           "slide-bg-light": !this.isDarkBg,
         };
       },
+      [":data-layout"]: "layout",
     },
 
     input: {
-      layout: { "x-model.fill": "layout" },
+      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/blocks/slide_editor/slide_editor.rb

@@ -6,6 +6,8 @@ module Coco
         include Coco::BookHelper
         include Coco::FormatHelper
 
+        DEFAULT_LAYOUT = "one-col-title"
+
         renders_one :title, ->(value = nil, **textarea_options) do
           Coco::App::Elements::SeamlessTextarea.new(**textarea_options,
             value: value,
@@ -23,6 +25,22 @@ module Coco
             x: {modelable: "value", model: "text1"})
         end
 
+        renders_one :text_2, ->(value = nil, **textarea_options) do
+          Coco::App::Elements::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
@@ -35,6 +53,10 @@ module Coco
           @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
@@ -46,6 +68,7 @@ module Coco
             bg_image: bg_image_src,
             bg_color_hex: bg_color_css,
             text_color_hex: text_color_css,
+            layout: current_layout,
             render_empty: true
           }
         end
@@ -56,7 +79,11 @@ module Coco
             text_color: text_color_css,
             title: title&.value,
             text_1: text_1&.value,
-            bg_image: bg_image_src
+            text_2: text_2&.value,
+            image_1: image_1_src,
+            image_2: image_2_src,
+            bg_image: bg_image_src,
+            layout: current_layout
           }
         end
 
@@ -71,6 +98,18 @@ module Coco
         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/app/elements/layout_picker_button/layout_picker_button.html.erb

@@ -1,6 +1,5 @@
 <%= render component_tag(x: {
-  data: x_data("appLayoutPickerButton", {selected: selected}),
-  "@dropdown:mount": "onDropdownMount"
+  data: x_data("appLayoutPickerButton", {selected: selected})
 }) do %> 
   <div
     @layout-picker:selected="selectedLayout = $event.detail.layout"

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

@@ -12,6 +12,12 @@ export default CocoComponent("appLayoutPickerButton", ({ selected }) => {
       );
     },
 
-    onDropdownMount() {},
+    getButton() {
+      return getData(this.$root.querySelector(".layout-picker-trigger"));
+    },
+
+    init() {
+      this.$watch("selectedLayout", () => this.getButton().hideDropdown());
+    },
   };
 });

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

@@ -8,6 +8,7 @@ module Coco
         include Coco::AppHelper
 
         wraps_component :button do |args|
+          args[:class] = [args[:class], "layout-picker-trigger"]
           Coco::App::Elements::Button.new(**args)
         end
 

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

@@ -13,6 +13,7 @@ export default CocoComponent("button", (data = {}) => {
     lastState: null,
     stateTooltips: data.tooltips || {},
     tooltipText: null,
+    dropdown: null,
 
     ...(data.props || {}),
 
@@ -66,6 +67,20 @@ export default CocoComponent("button", (data = {}) => {
       this.$options.disabled = value;
     },
 
+    /* dropdown */
+
+    hideDropdown() {
+      if (this.dropdown) {
+        this.dropdown.hide();
+      }
+    },
+
+    showDropdown() {
+      if (this.dropdown) {
+        this.dropdown.show();
+      }
+    },
+
     /* confirmation */
 
     checkConfirmation(event) {

data/app/components/coco/base/image_uploader/image_uploader.html.erb

@@ -14,6 +14,4 @@
     "@click.stop": "",
     "@change": "handleFiles($el.files)") %>
   <%= content %>
-<% end %>
-
-     
+<% end %>

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

@@ -39,7 +39,7 @@
     /* ------------- */
 
     @apply relative rounded-md @container;
-    @apply bg-white bg-no-repeat bg-cover;
+    @apply bg-white bg-no-repeat bg-cover bg-center;
 
     min-width: 320px;
 
@@ -55,7 +55,7 @@
     [data-slide-region],
     .slide-header,
     .slide-text,
-    .slide-image {
+    .slide-media {
       @apply hidden;
     }
 
@@ -77,7 +77,8 @@
     }
 
     .slide-media {
-      @apply w-full;
+      @apply w-full text-current;
+      font-size: var(--text-font-size);
 
       img {
         @apply w-full h-full object-contain;
@@ -147,6 +148,7 @@
 
     &[data-layout="one-col-text"] {
       .slide-container {
+        @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
         @apply flex items-center;
       }
 
@@ -185,7 +187,7 @@
 
     &[data-layout="one-col-media"] {
       .slide-container {
-        @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
+        @apply p-6 @slide-fluid:p-[var(--slide-padding-sm)];
       }
 
       .slide-layout,
@@ -242,11 +244,6 @@
       [data-slide-region="content-1"],
       [data-slide-region="content-2"] {
         @apply block;
-
-        .slide-text,
-        .slide-media {
-          @apply block;
-        }
       }
 
       [data-slide-region="content-1"] {
@@ -254,6 +251,12 @@
       }
     }
 
+    &[data-layout="two-col-text"] {
+      .slide-text {
+        @apply block;
+      }
+    }
+
     &[data-layout="two-col-media"] {
       .slide-layout {
         @apply @slide-fluid:h-full;
@@ -264,7 +267,7 @@
       }
 
       .slide-media {
-        @apply @slide-fluid:absolute @slide-fluid:inset-0;
+        @apply block @slide-fluid:absolute @slide-fluid:inset-0;
       }
     }
 

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.html.erb

@@ -17,9 +17,10 @@
               <div class="slide-text" data-role="text-1">
                 <%= text_1 %>
               </div>
-            <% elsif image_1? %>
+            <% end %>
+            <% if image_1? %>
               <div class="slide-media" data-role="media-1">
-                <img src="<%= image_1 %>">
+                <%= image_1 %>
               </div>
             <% end %>
           </div>
@@ -30,9 +31,10 @@
             <div class="slide-text" data-role="text-2">
               <%= text_2 %>
             </div>
-          <% elsif image_2? %>
+          <% end %>
+          <% if image_2? %>
             <div class="slide-media" data-role="media-2">
-              <img src="<%= image_2 %>">
+              <%= image_2 %>
             </div>
           <% end %>
         </div>

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.rb

@@ -28,15 +28,15 @@ module Coco
             end
 
           renders_one :image_1,
-            ->(href:) do
+            ->(src: nil, &block) do
               @has_content = true
-              href
+              block ? block.call : tag.img(src: src)
             end
 
           renders_one :image_2,
-            ->(href:) do
+            ->(src: nil, &block) do
               @has_content = true
-              href
+              block ? block.call : tag.img(src: src)
             end
 
           before_initialize do |kwargs|

data/config/locales/coco.en.yml

@@ -10,6 +10,8 @@ en:
             blank_state: "Drag a jpg, png or gif onto the slide area or..."
           text_color_picker:
             label: "Text colour"
+          layout_picker:
+            label: "Layout"
           undo_button:
             tooltip: "Undo"
           redo_button:

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.5.7"
+  VERSION = "0.6.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.5.7
+  version: 0.6.1
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-08-07 00:00:00.000000000 Z
+date: 2023-08-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails