katalyst-content 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dabae0594160eb1ebafdd3501b5d521113fdcc8bde6f36eede4296314297255d
-  data.tar.gz: aace7d35cd049a4c3fcf140f21099d5d04d03020a1935402e8999fa82c368823
+  metadata.gz: 15c10b4886c26310eb6a15c64f9b3c31b1b2dc312d9b4088bf530e6610ec3599
+  data.tar.gz: 2dd1d7e5179ff4d9f53d66b8ea99cd3d19f497e078d6234da4c8525e13a25ba1
 SHA512:
-  metadata.gz: 452af88132002902aef2edfa6858e772a4985ea069cc6b1726c4acd9f3f2594fb84bf2e35a3377d233c5cfe1411caa5c7fc86c795b52d6c648d3a9c80bf616fe
-  data.tar.gz: 1077d2f70a588105436e553b186f4cd3239a250ef36c2f10e15827973b8ea8375ca62b9b5c227d432f8642ef63a8ccdde832a6c89c482df6b99c79749811e78f
+  metadata.gz: 89a50df67af76c48e7978be76eee21da5100a8bf7fb69c6f580dc1868f4f644300f7d782b7cab61c2897717577e1cf4cc865a8b1f437c7d559c9b321f66b0bf0
+  data.tar.gz: c5dbc2983e3438642f38a58351010f7b110715ed865fb5851f1c43d4e8801a8c5a0e9bc0e371f5555cad72c976a3fc53d1bbc88cb6efc260d9403f1d0751f26c

data/app/assets/javascripts/controllers/content/editor/container_controller.js

@@ -41,9 +41,7 @@ export default class ContainerController extends Controller {
   nest(event) {
     const item = getEventItem(event);
 
-    item.traverse((child) => {
-      child.depth += 1;
-    });
+    item.nest();
 
     this.#update();
     event.preventDefault();
@@ -52,9 +50,7 @@ export default class ContainerController extends Controller {
   deNest(event) {
     const item = getEventItem(event);
 
-    item.traverse((child) => {
-      child.depth -= 1;
-    });
+    item.deNest();
 
     this.#update();
     event.preventDefault();

data/app/assets/javascripts/utils/content/editor/item.js

@@ -128,6 +128,39 @@ export default class Item {
     expanded.forEach((item) => item.traverse(callback));
   }
 
+  /**
+   * Increase the depth of this item and its descendants.
+   * If this causes it to become a child of a collapsed item, then collapse this item.
+   */
+  nest() {
+    this.traverse((child) => {
+      child.depth += 1;
+    });
+
+    if (this.previousItem.hasCollapsedDescendants()) {
+      this.previousItem.collapseChild(this);
+    }
+  }
+
+  /**
+   * Move the given item into this element's hidden children list.
+   * Assumes the list already exists.
+   *
+   * @param item {Item}
+   */
+  collapseChild(item) {
+    this.#childrenListElement.appendChild(item.node);
+  }
+
+  /**
+   * Decrease the depth of this item (and its descendants).
+   */
+  deNest() {
+    this.traverse((child) => {
+      child.depth -= 1;
+    });
+  }
+
   /**
    * Collapses visible (logical) children into this element's hidden children
    * list, creating it if it doesn't already exist.

data/app/assets/stylesheets/katalyst/content/_index.scss

@@ -1,31 +1 @@
 @use "editor";
-@use "trix";
-
-/*
- * We need to override trix.css’s image gallery styles to accommodate the
- * <action-text-attachment> element we wrap around attachments. Otherwise,
- * images in galleries will be squished by the max-width: 33%; rule.
-*/
-.trix-content .attachment-gallery > action-text-attachment,
-.trix-content .attachment-gallery > .attachment {
-  flex: 1 0 33%;
-  padding: 0 0.5em;
-  max-width: 33%;
-}
-
-.trix-content
-  .attachment-gallery.attachment-gallery--2
-  > action-text-attachment,
-.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
-.trix-content
-  .attachment-gallery.attachment-gallery--4
-  > action-text-attachment,
-.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
-  flex-basis: 50%;
-  max-width: 50%;
-}
-
-.trix-content action-text-attachment .attachment {
-  padding: 0 !important;
-  max-width: 100% !important;
-}

data/app/assets/stylesheets/katalyst/content/editor/_index.scss

@@ -4,6 +4,8 @@
 @use "item-rules";
 @use "new-items";
 @use "status-bar";
+@use "trix";
+@use "trix-rails";
 
 $grey-light: #f4f4f4 !default;
 $grey: #ececec !default;
@@ -99,8 +101,7 @@ $status-dirty-color: #aaa !default;
       align-items: center;
     }
 
-    .title,
-    .url {
+    .heading {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -111,14 +112,41 @@ $status-dirty-color: #aaa !default;
 [data-controller="content--editor--container"] [role="rowheader"],
 [data-controller="content--editor--item"] {
   display: grid;
-  grid-template-columns: 40% 2fr auto;
+  grid-template-columns: minmax(10rem, calc(100% - 12rem)) 1fr 10rem;
   padding: 0.25rem 0.5rem;
   gap: 1rem;
   align-items: center;
 }
 
+[data-controller="content--editor--item"] {
+  .item-background::before {
+    content: "A";
+    font-family: cursive;
+    display: inline-block;
+    min-height: 1rem;
+    min-width: 1rem;
+    text-align: center;
+    color: var(--theme-text-color);
+    background-color: var(--theme-background-color);
+    border: 1px solid var(--theme-border-color);
+    border-radius: 2px;
+  }
+
+  .item-background.light {
+    --theme-text-color: black;
+    --theme-border-color: black;
+    --theme-background-color: white;
+  }
+
+  .item-background.dark {
+    --theme-text-color: white;
+    --theme-border-color: white;
+    --theme-background-color: black;
+  }
+}
+
 // Ensures vertical alignment of header with rows
-[data-controller="content--editor-container"] {
+[data-controller="content--editor--container"] {
   [role="rowheader"] {
     min-height: var(--row-height);
     background: var(--table-header-color);

data/app/assets/stylesheets/katalyst/content/editor/_item-actions.scss

@@ -16,14 +16,14 @@
   [data-tree-controls] {
     [role="button"] {
       @extend %icon-block;
+
       &::before {
         @extend %icon;
       }
     }
   }
 
-  [role="img"][value="link"],
-  [role="img"][value="title"] {
+  [role="img"][value="content"] {
     width: 1.5rem;
     height: 1.5rem;
     display: grid;
@@ -45,15 +45,9 @@
       text-align: center;
     }
 
-    &[value="link"] {
-      &::before {
-        content: "#";
-      }
-    }
-
-    &[value="title"] {
+    &[value="content"] {
       &::before {
-        content: "T";
+        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.9 0C2.28667 0 0 2.28667 0 4.9C0 6.86 1.30667 8.82008 3.26667 9.47341V39.5266C1.30667 40.1799 0 42.14 0 44.1C0 46.7133 2.28667 49 4.9 49C6.86 49 8.82 47.6933 9.47333 45.7333H39.5267C40.18 47.6933 42.14 49 44.1 49C46.7133 49 49 46.7133 49 44.1C49 42.14 47.6933 40.1799 45.7333 39.5266V9.47341C47.6933 8.82008 49 6.86 49 4.9C49 2.28667 46.7133 0 44.1 0C42.14 0 40.18 1.30667 39.5267 3.26667H9.47333C8.82 1.30667 7.18667 0 4.9 0ZM4.9 3.26667C5.88 3.26667 6.53333 3.92 6.53333 4.9C6.53333 5.88 5.88 6.53333 4.9 6.53333C3.92 6.53333 3.26667 5.88 3.26667 4.9C3.26667 3.92 3.92 3.26667 4.9 3.26667ZM44.1 3.26667C45.08 3.26667 45.7333 3.92 45.7333 4.9C45.7333 5.88 45.08 6.53333 44.1 6.53333C43.12 6.53333 42.4667 5.88 42.4667 4.9C42.4667 3.92 43.12 3.26667 44.1 3.26667ZM9.47333 6.53333H39.5267C40.18 7.84 41.16 9.14675 42.4667 9.47341V39.5266C41.16 40.1799 39.8533 41.16 39.5267 42.4667H9.47333C8.82 41.16 7.84 39.8533 6.53333 39.5266V9.47341C7.84 8.82008 8.82 7.84 9.47333 6.53333ZM4.9 42.4667C5.88 42.4667 6.53333 43.12 6.53333 44.1C6.53333 45.08 5.88 45.7333 4.9 45.7333C3.92 45.7333 3.26667 45.08 3.26667 44.1C3.26667 43.12 3.92 42.4667 4.9 42.4667ZM44.1 42.4667C45.08 42.4667 45.7333 43.12 45.7333 44.1C45.7333 45.08 45.08 45.7333 44.1 45.7333C43.12 45.7333 42.4667 45.08 42.4667 44.1C42.4667 43.12 43.12 42.4667 44.1 42.4667Z' fill='white'/%3E%3Cpath d='M13 19.1667V11H35.8667V19.1667H32.6V14.2667H26.0667V33.8667H29.3333V37.1333H19.5333V33.8667H22.8V14.2667H16.2667V19.1667H13Z' fill='white'/%3E%3C/svg%3E");
       }
     }
   }

data/app/assets/stylesheets/katalyst/content/editor/_new-items.scss

@@ -28,12 +28,8 @@
       position: unset;
     }
 
-    &[data-item-type="link"]:before {
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_67_1273)'%3E%3Cpath d='M16 22H32V26H16V22ZM40.2 24H44C44 18.48 39.52 14 34 14H26V17.8H34C37.42 17.8 40.2 20.58 40.2 24ZM7.8 24C7.8 20.58 10.58 17.8 14 17.8H22V14H14C8.48 14 4 18.48 4 24C4 29.52 8.48 34 14 34H22V30.2H14C10.58 30.2 7.8 27.42 7.8 24ZM38 24H34V30H28V34H34V40H38V34H44V30H38V24Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_67_1273'%3E%3Crect width='48' height='48' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
-    }
-
-    &[data-item-type="button"]:before {
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_67_1276)'%3E%3Cpath d='M44 18V30C44 32.2 42.2 34 40 34H38V30H40V18H8V30H20V34H8C5.8 34 4 32.2 4 30V18C4 15.8 5.8 14 8 14H40C42.2 14 44 15.8 44 18ZM29 38L31.18 33.18L36 31L31.18 28.82L29 24L26.82 28.82L22 31L26.82 33.18L29 38ZM34 28L35.24 25.24L38 24L35.24 22.76L34 20L32.76 22.76L30 24L32.76 25.24L34 28ZM29 38L31.18 33.18L36 31L31.18 28.82L29 24L26.82 28.82L22 31L26.82 33.18L29 38ZM34 28L35.24 25.24L38 24L35.24 22.76L34 20L32.76 22.76L30 24L32.76 25.24L34 28Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_67_1276'%3E%3Crect width='48' height='48' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+    &[data-item-type="content"]:before {
+      background-image: url("data:image/svg+xml,%3Csvg width='49' height='49' viewBox='0 0 49 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.9 0C2.28667 0 0 2.28667 0 4.9C0 6.86 1.30667 8.82008 3.26667 9.47341V39.5266C1.30667 40.1799 0 42.14 0 44.1C0 46.7133 2.28667 49 4.9 49C6.86 49 8.82 47.6933 9.47333 45.7333H39.5267C40.18 47.6933 42.14 49 44.1 49C46.7133 49 49 46.7133 49 44.1C49 42.14 47.6933 40.1799 45.7333 39.5266V9.47341C47.6933 8.82008 49 6.86 49 4.9C49 2.28667 46.7133 0 44.1 0C42.14 0 40.18 1.30667 39.5267 3.26667H9.47333C8.82 1.30667 7.18667 0 4.9 0ZM4.9 3.26667C5.88 3.26667 6.53333 3.92 6.53333 4.9C6.53333 5.88 5.88 6.53333 4.9 6.53333C3.92 6.53333 3.26667 5.88 3.26667 4.9C3.26667 3.92 3.92 3.26667 4.9 3.26667ZM44.1 3.26667C45.08 3.26667 45.7333 3.92 45.7333 4.9C45.7333 5.88 45.08 6.53333 44.1 6.53333C43.12 6.53333 42.4667 5.88 42.4667 4.9C42.4667 3.92 43.12 3.26667 44.1 3.26667ZM9.47333 6.53333H39.5267C40.18 7.84 41.16 9.14675 42.4667 9.47341V39.5266C41.16 40.1799 39.8533 41.16 39.5267 42.4667H9.47333C8.82 41.16 7.84 39.8533 6.53333 39.5266V9.47341C7.84 8.82008 8.82 7.84 9.47333 6.53333ZM4.9 42.4667C5.88 42.4667 6.53333 43.12 6.53333 44.1C6.53333 45.08 5.88 45.7333 4.9 45.7333C3.92 45.7333 3.26667 45.08 3.26667 44.1C3.26667 43.12 3.92 42.4667 4.9 42.4667ZM44.1 42.4667C45.08 42.4667 45.7333 43.12 45.7333 44.1C45.7333 45.08 45.08 45.7333 44.1 45.7333C43.12 45.7333 42.4667 45.08 42.4667 44.1C42.4667 43.12 43.12 42.4667 44.1 42.4667Z' /%3E%3Cpath d='M13 19.1667V11H35.8667V19.1667H32.6V14.2667H26.0667V33.8667H29.3333V37.1333H19.5333V33.8667H22.8V14.2667H16.2667V19.1667H13Z' /%3E%3C/svg%3E");
     }
   }
 }

data/app/assets/stylesheets/katalyst/content/editor/_trix-rails.scss

@@ -0,0 +1,30 @@
+// Rails-provided customizations to trix editor
+
+/*
+ * We need to override trix.css’s image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+.trix-content .attachment-gallery > action-text-attachment,
+.trix-content .attachment-gallery > .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content
+.attachment-gallery.attachment-gallery--2
+> action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
+.trix-content
+.attachment-gallery.attachment-gallery--4
+> action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}

data/app/views/katalyst/content/editor/_item.html.erb

@@ -2,10 +2,13 @@
   <div class="tree" data-invisible="<%= !item.visible? %>">
     <%= builder.accordion_actions %>
 
-    <span role="img" value="<%= item.model_name.to_param %>" title="Type"></span>
+    <span role="img" value="<%= item.model_name.param_key %>" title="Type"></span>
     <h4 class="heading" title="<%= item.heading %>"><%= item.heading %></h4>
     <span role="img" value="invisible" title="Hidden"></span>
   </div>
 
+  <div class="item-background <%= item.background %>">
+  </div>
+
   <%= builder.item_actions %>
 <% end %>

data/lib/katalyst/content/version.rb

@@ -2,6 +2,6 @@
 
 module Katalyst
   module Content
-    VERSION = "0.1.0"
+    VERSION = "0.1.2"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-content
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Katalyst Interactive
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-09-14 00:00:00.000000000 Z
+date: 2022-09-15 00:00:00.000000000 Z
 dependencies: []
 description:
 email:
@@ -35,6 +35,7 @@ files:
 - app/assets/stylesheets/katalyst/content/editor/_item-rules.scss
 - app/assets/stylesheets/katalyst/content/editor/_new-items.scss
 - app/assets/stylesheets/katalyst/content/editor/_status-bar.scss
+- app/assets/stylesheets/katalyst/content/editor/_trix-rails.scss
 - app/controllers/katalyst/content/application_controller.rb
 - app/controllers/katalyst/content/items_controller.rb
 - app/helpers/katalyst/content/application_helper.rb