Add element groups functionality for cleaning up editors

AlchemyCMS · Jun 9, 2021 · c946248 · c946248
1 parent c03a531
commit c946248
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 1 deletion.
diff --git a/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee b/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee
@@ -36,6 +36,8 @@ Alchemy.ElementEditors =
     # Binds the custom SaveElement event
     @element_area.on "SaveElement.Alchemy", '.element-editor', (e, data) =>
       @onSaveElement(e, data)
+    @element_area.on "click", '[data-toggle-content-group]', (e) =>
+      @onToggleContentGroup(e)
     # Listen to postMessage messages from the preview frame
     window.addEventListener 'message', (e) =>
       @onMessage(e.data)
@@ -170,6 +172,12 @@ Alchemy.ElementEditors =
       Alchemy.Buttons.enable($element)
     true
 
+  # Toggle visibility of the content fields in the group
+  onToggleContentGroup: (event) ->
+    $group_div = $(event.currentTarget).closest('.content-group');
+    $group_div.toggleClass('expanded');
+    false
+
   # Event handlers
 
   onMessage: (data) ->

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -635,6 +635,38 @@ select.long {
   padding: 0;
 }
 
+
+.content-group {
+  width: 100%;
+  padding: $default-padding 0;
+  position: relative;
+  border-bottom: 1px solid $medium-gray;
+
+  &:last-child { border-bottom: none;}
+
+  .content-group-header { 
+    font-weight: bold;
+
+    .content-group-expand {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+    }
+  }
+
+  .content-group-contents { display: none; }
+
+  &.expanded {
+    .content-group-contents {
+      display: block;
+    }
+
+    .content-group-expand {
+      @extend .fa-minus;
+    }
+  }
+}
+
 .content_editor {
   width: 100%;
   padding: $default-padding 0;

diff --git a/app/views/alchemy/admin/elements/_element.html.erb b/app/views/alchemy/admin/elements/_element.html.erb
@@ -25,7 +25,24 @@
         <div id="element_<%= element.id %>_errors" class="element_errors"></div>
 
         <div id="element_<%= element.id %>_content" class="element-content-editors">
-          <%= render element.contents %>
+          <% element.contents.select { |c| c.definition[:group].blank? }.each do |content| %>
+            <%= render content %>
+          <% end %>
+
+          <!-- Each content group -->
+          <% element.contents.map { |c| c.definition[:group] }.compact.uniq.each do |group| %>
+            <div class="content-group">
+              <%= link_to '#', id: "content_group_#{group.parameterize.underscore}_header", class: 'content-group-header', data: { toggle_content_group: true } do %>
+                <i class="content-group-expand icon fa-fw fa-plus fas" />
+                <%= group %>
+              <% end %>
+              <%= content_tag :div, id: "element_#{element.id}_content_group_#{group.parameterize.underscore}", class: 'content-group-contents' do %>
+                <% element.contents.select { |c| c.definition[:group] == group }.each do |content| %>
+                  <%= render content %>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
         </div>
 
         <% if element.taggable? %>
@@ -77,3 +94,12 @@
     </div>
   <% end %>
 <% end %>
+
+<!-- <script type='application/javascript'>
+  $(function() {
+    $(document).on('click', '.content-group-header', function() {
+      $(this).parent().toggleClass('expanded');
+      return false;
+    });
+  })
+</script> -->