spina 2.0.0 → 2.1.1

data/app/components/spina/forms/trix_toolbar_component.rb

@@ -0,0 +1,11 @@
+module Spina
+  module Forms
+    class TrixToolbarComponent < ApplicationComponent
+      
+      def initialize(trix_id)
+        @trix_id = trix_id
+      end
+      
+    end
+  end
+end

data/app/components/spina/hooks/hook_component.rb

@@ -0,0 +1,21 @@
+module Spina
+  module Hooks
+    class HookComponent < ApplicationComponent
+      
+      def initialize(partial:)
+        @partial = partial
+      end
+      
+      def call
+        render Spina::Hooks::PartialComponent.with_collection(plugins, partial: @partial)
+      end
+      
+      def plugins
+        Spina::Plugin.all.find_all do |plugin|
+          helpers.current_theme.plugins.include?(plugin.name)
+        end
+      end
+      
+    end
+  end
+end

data/app/components/spina/hooks/partial_component.rb

@@ -0,0 +1,21 @@
+module Spina
+  module Hooks
+    class PartialComponent < ApplicationComponent
+      with_collection_parameter :plugin
+      
+      def initialize(plugin:, partial:)
+        @plugin = plugin
+        @partial = partial
+      end
+      
+      def call
+        render partial: "spina/admin/hooks/#{@plugin.namespace}/#{@partial}"
+      end
+      
+      def render?
+        helpers.lookup_context.exists? "spina/admin/hooks/#{@plugin.namespace}/_#{@partial}"
+      end
+      
+    end
+  end
+end

data/app/components/spina/main_navigation/link_component.html.erb

@@ -0,0 +1,5 @@
+<li <%= "data-navigation-active" if @active %>>
+  <%= link_to @path, class: "block p-3 leading-none text-white hover:opacity-100 transition-opacity font-semibold #{css_classes}" do %>
+    <%= @label %>
+  <% end %>
+</li>

data/app/components/spina/main_navigation/link_component.rb

@@ -0,0 +1,21 @@
+module Spina
+  module MainNavigation
+    class LinkComponent < ApplicationComponent
+
+      def initialize(label, path, active: false)
+        @label = label
+        @path = path
+        @active = active
+      end
+
+      def css_classes
+        if @active
+          ""
+        else
+          "opacity-50"
+        end
+      end
+
+    end
+  end
+end

data/app/components/spina/main_navigation/sub_nav_component.html.erb

@@ -0,0 +1,18 @@
+<li data-navigation-target="navigation">
+  <button type="button" class="flex w-full items-center p-3 relative <%= button_classes %> hover:opacity-100 transition-opacity" data-navigation-target="button" data-action="navigation#toggle">
+    <%= icon %>
+  </button>
+
+  <ul class="flex items-center justify-center md:block md:h-screen absolute left-0 md:inset-0 z-30 w-full transform transition-transform ease-in-out duration-300 md:h-full <%= ul_classes %>">
+    <div class="bg-spina-dark md:bg-gradient-to-b md:from-spina-dark md:to-spina-light px-2 md:px-3 py-3 md:py-5 shadow-lg md:shadow-none w-full md:h-full">
+      <div>
+        <%= links %>
+      </div>
+      
+      <button type="button" data-action="navigation#backToFirstLevel" class="hidden md:flex text-white opacity-30 hover:opacity-100 w-full transition-opacity font-semibold py-3">
+        <%= helpers.heroicon('chevron-right', style: :solid, class: "w-6 h-6 transform rotate-180 ml-1") %>
+        <%=t "spina.main_menu" %>
+      </button>
+    </div>
+  </ul>
+</li>

data/app/components/spina/main_navigation/sub_nav_component.rb

@@ -0,0 +1,33 @@
+module Spina
+  module MainNavigation
+    class SubNavComponent < ApplicationComponent      
+      renders_one :icon
+      renders_one :links
+      
+      def initialize(name = :content)
+        @name = name
+      end
+      
+      def active?
+        helpers.admin_section == @name
+      end
+      
+      def button_classes
+        if active?
+          "opacity-100"
+        else
+          "opacity-50"
+        end
+      end
+      
+      def ul_classes
+        if active?
+          "md:translate-x-20 "
+        else
+          "translate-x-full"
+        end
+      end
+      
+    end
+  end
+end

data/app/components/spina/media_picker/image_component.html.erb

@@ -0,0 +1,18 @@
+<div data-selectable-target="item">
+  <button type="button" 
+    data-action="media-picker-modal#selectImage selectable#select dblclick->media-picker-modal#instantInsert" 
+    data-image-id="<%= @image.id %>"
+    data-signed-blob-id="<%= @image.file.blob.signed_id %>"
+    data-filename="<%= @image.file.filename %>"
+    data-thumbnail="<%= helpers.thumbnail_url(@image) %>"
+    data-embedded-url="<%= helpers.embedded_image_url(@image) %>"
+    data-selected-class="bg-gray-100 border-spina scale-105"
+    data-deselected-class="border-transparent"
+    class="w-full h-40 overflow-hidden rounded-md transform transition-transform duration-200 border-2 border-transparent hover:scale-105">
+
+    <%= image_tag helpers.thumbnail_url(@image), class: 'object-contain h-40 w-full', data: {controller: "image-fade-in"} %>
+  </button>
+
+  <div class="text-xs text-center text-gray-700 rounded p-1" data-selected-class="text-white bg-spina" data-deselected-class="text-gray-700"><%= @image.file.filename %></div>
+  <div class="text-xs text-center text-gray-400"><%= number_to_human_size @image.file.byte_size %></div>
+</div>

data/app/components/spina/media_picker/image_component.rb

@@ -0,0 +1,11 @@
+module Spina
+  module MediaPicker
+    class ImageComponent < ApplicationComponent
+
+      def initialize(image:)
+        @image = image
+      end
+
+    end
+  end
+end

data/app/components/spina/media_picker/modal_component.html.erb

@@ -0,0 +1,74 @@
+<%= render(Spina::UserInterface::ModalComponent.new(size: "max-w-6xl h-full")) do |component| %>
+  <div class="h-full w-full" data-controller="infinite-scroll media-picker-modal" data-target="<%= @target %>">
+    <turbo-frame id="media_picker">
+      <div class="flex flex-col md:flex-row h-full w-full">
+        <div class="flex-1 bg-white flex flex-col max-h-full relative overflow-hidden">
+          <div data-infinite-scroll-target="container" data-controller="selectable" class="p-6 h-full w-full overflow-scroll ">
+            
+            <!-- Images are loaded using nested turbo-frame-tags -->
+            <!-- Only load images in multiples of 4 so that this grid -->
+            <!-- will not show any gaps. -->
+            <turbo-frame id="images-<%= @images.current_page %>">
+              <div class="grid grid-cols-2 md:grid-cols-4 gap-6 auto-rows-min">
+                <%= render Spina::MediaPicker::ImageComponent.with_collection(@images) %>
+              </div>
+              
+              <% if @images.next_page %>
+                <turbo-frame id="images-<%= @images.next_page %>">
+                  <%= link_to "...", helpers.path_to_next_page(@images), data: {infinite_scroll_target: "button"} %>
+                </turbo-frame>
+              <% end %>
+              
+            </turbo-frame>
+            
+          </div>
+        </div>
+      
+        <div class="md:w-72 p-4 border-t rounded-b-lg md:rounded-none md:border-t-0 border-gray-200 flex flex-col justify-between bg-gray-100 md:bg-opacity-50 md:rounded-l-lg">
+          <div class="hidden md:block md:mb-6">      
+            <%= link_to helpers.spina.admin_media_picker_path, class: "font-medium w-full text-sm px-3 py-2 rounded-lg flex items-center justify-between #{media_folder_classes(nil)}", data: {turbo_frame: "media_picker"} do %>
+              <div class="flex items-center">
+                <%= helpers.heroicon("collection", style: :solid, class: "w-5 h-5 mr-2 text-spina-light") %>
+                <%=t 'spina.images.all_images' %>
+              </div>
+              
+              <div class="text-gray-400 text-sm font-semibold">
+                <%= image_count %>
+              </div>
+            <% end %>
+      
+            <% media_folders.each do |media_folder| %>
+              <%= link_to helpers.spina.admin_media_picker_path(media_folder_id: media_folder.id), class: "font-medium w-full text-gray-600 text-sm px-3 py-2 cursor-pointer rounded-lg flex items-center justify-between #{media_folder_classes(media_folder)}", data: {turbo_frame: "media_picker"} do %>
+                <div class="flex items-center">
+                  <%= helpers.heroicon('folder', style: :solid, class: 'w-5 h-5 mr-2 text-spina-light') %>
+                  <%= media_folder.name %>
+                </div>
+                
+                <div class="text-gray-400 text-sm font-semibold">
+                  <%= media_folder.images.count %>
+                </div>
+              <% end %>
+            <% end %>
+            
+            <%= form_with model: [:admin, Spina::Image.new], url: helpers.spina.admin_images_path, data: {controller: "form loading-button", loading_message: t('spina.media_library.uploading'), action: "turbo:submit-end->loading-button#doneLoading", turbo_frame: "media_picker"} do |f| %>
+              <%= hidden_field_tag :modal, true %>
+              <%= f.hidden_field :media_folder_id, value: @media_folder&.id %>
+              
+              <%= f.file_field :files, multiple: true, accept: "image/*", id: "new_image_file_field", class: 'hidden', data: {action: "loading-button#loading form#requestSubmit"} %>
+              
+              <button type="button" class="font-medium w-full text-gray-600 text-sm hover:bg-gray-200 px-3 py-2 cursor-pointer rounded-lg flex items-center w-full" data-controller="delegate-click" data-action="delegate-click#click" data-loading-button-target="button" data-delegate-click-target="#new_image_file_field">
+                <%= helpers.heroicon("upload", style: :solid, class: "w-5 h-5 text-spina mr-2") %>
+                <%=t 'spina.media_library.upload_from_device' %>
+              </button>
+            <% end %>
+          </div>
+          
+          <button type="button" class="btn btn-primary w-full mt-3" data-action="media-picker-modal#confirm modal#close">
+            <%= helpers.heroicon("plus", style: :solid, class: "text-white w-6 h-6") %>
+            <%=t 'spina.media_library.insert' %>
+          </button>
+        </div>
+      </div>
+    </turbo-frame>
+  </div>
+<% end %>

data/app/components/spina/media_picker/modal_component.rb

@@ -0,0 +1,29 @@
+module Spina
+  module MediaPicker
+    class ModalComponent < ApplicationComponent
+      
+      def initialize(target, images:, media_folder: nil)
+        @target = target
+        @images = images
+        @media_folder = media_folder
+      end
+      
+      def media_folders
+        @media_folders ||= Spina::MediaFolder.order(:name)
+      end
+      
+      def image_count
+        @image_count ||= Spina::Image.count
+      end
+      
+      def media_folder_classes(media_folder)
+        if media_folder == @media_folder
+          "text-gray-900 bg-spina-dark bg-opacity-20"
+        else
+          "text-gray-600 hover:bg-gray-200 bg-opacity-100 hover:bg-gray-200"
+        end
+      end
+
+    end
+  end
+end

data/app/components/spina/pages/actions_component.html.erb

@@ -0,0 +1,65 @@
+<% if helpers.asset_available?("spina/view_template_previews/#{@page.view_template}.png") %>
+  <div class="relative" data-controller="reveal" data-reveal-away-value>
+    <button type="button" class="btn text-gray-400 border-none hover:text-gray-700" data-action="reveal#toggle">
+      <%= helpers.heroicon('eye', style: :solid, class: 'w-4 h-4 mr-2') %>
+      <%=t 'spina.pages.preview' %>
+    </button>
+    
+    <div class="absolute left-1/2 transform -translate-x-1/2">
+      <div hidden data-reveal data-transition class="w-60 bg-white shadow-lg rounded-md">
+        <%= image_tag "spina/view_template_previews/#{@page.view_template}.png", class: "block w-full rounded-md" %>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<!-- Advanced actions -->
+<div class="relative w-1/2 md:w-auto" data-controller="reveal" data-reveal-away-value>
+  <button type="button" class="btn btn-default px-3 w-full" data-action="reveal#toggle">
+    <svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+      <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
+    </svg>
+  </button>
+
+  <div hidden data-reveal data-transition class="origin-top-left md:origin-top-right absolute md:right-0 mt-2 w-56 rounded-md shadow-lg border border-gray-200">
+    <div class="rounded-md bg-white shadow-xs">
+      <div class="py-1">
+        
+        <% unless @page.homepage? %>
+          <%= link_to t('spina.pages.move_page') + "...", helpers.spina.new_admin_page_move_path(@page), class: "block px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900", data: {turbo_frame: "modal", action: "reveal#hide"} %>
+        <% end %>
+        
+        <% if !@page.custom_page? %>
+          <%= link_to t('spina.pages.change_view_template') + "...", helpers.spina.edit_template_admin_page_path(@page), class: "block px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900", data: {turbo_frame: "modal", action: "reveal#hide"} %>
+        <% end %>
+        <% if @page.deletable? %>
+          <%= button_to t('spina.pages.delete'), helpers.spina.admin_page_path(@page), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.pages.delete_confirmation', subject: @page.title)}} %>
+        <% else %>
+          <span class="block px-4 py-2 text-sm leading-5 text-gray-400"><%=t 'spina.pages.cannot_be_deleted' %></span>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Translations -->
+<%= render Spina::Pages::TranslationsComponent.new(@page, label: @locale.upcase) %>
+
+<button type="submit" form="<%= dom_id(@page) %>" class="btn btn-primary w-1/2 md:w-auto" data-controller="button hotkeys" data-hotkeys="command+s, ctrl+s" data-hotkeys-target="button" data-action="button#loading" data-loading-message="Saving...">
+  <%= helpers.heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2') %>
+  <% if @page.draft? %>
+    <%=t 'spina.pages.save_draft' %>
+  <% else %>
+    <%=t 'spina.pages.save_changes' %>
+  <% end %>
+</button>
+
+<!-- Saving -->
+<% if @page.persisted? && @page.draft? %>
+  <button type="submit" form="<%= dom_id(@page) %>" name="page[draft]" value="false" class="btn btn-primary flex items-center" data-controller="hotkeys" data-hotkeys="control+command+s" data-hotkeys-target="button">
+    <svg class="w-4 h-4 -ml-1 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="evenodd" d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z" clip-rule="evenodd" />
+    </svg>
+    <%=t 'spina.pages.publish' %>
+  </button>
+<% end %>

data/app/components/spina/pages/actions_component.rb

@@ -0,0 +1,12 @@
+module Spina
+  module Pages
+    class ActionsComponent < ApplicationComponent
+      
+      def initialize(page:, locale: I18n.locale)
+        @page = page
+        @locale = locale
+      end
+      
+    end
+  end
+end

data/app/components/spina/pages/list_component.html.erb

@@ -0,0 +1,8 @@
+<div data-controller="sortable">
+  <%= form_with url: helpers.spina.sort_admin_pages_path, data: {sortable_target: "form"} do |f| %>
+  <% end %>
+  
+  <ul data-sortable-target="list">
+    <%= render Spina::Pages::PageComponent.with_collection(@pages, sortable: sortable) %>
+  </ul>
+</div>

data/app/components/spina/pages/list_component.rb

@@ -0,0 +1,13 @@
+module Spina
+  module Pages
+    class ListComponent < ApplicationComponent
+      attr_reader :depth, :sortable
+  
+      def initialize(pages:, sortable: true)
+        @pages = pages
+        @sortable = sortable
+      end
+  
+    end
+  end
+end

data/app/components/spina/pages/location_component.html.erb

@@ -0,0 +1,10 @@
+<div class="flex items-center border border-gray-300 rounded-md bg-white p-1 relative shadow-sm" data-controller="parent-pages">
+  
+  <%= helpers.heroicon("collection", style: :solid, class: 'w-5 h-5 ml-2 text-gray-400 absolute') %>
+  
+  <%= f.select :resource_id, resources, {}, class: "form-select hover:bg-gray-100 bg-none shadow-none w-auto bg-transparent border-none focus:ring-0 cursor-pointer pr-2 pl-8 flex-none truncate", data: {controller: "select-placeholder", action: "select-placeholder#update parent-pages#update"} %>
+  
+  <%= helpers.heroicon('chevron-right', style: :solid, class: 'w-5 h-5 text-gray-600 flex-none') %>
+  
+  <%= helpers.turbo_frame_tag "parent_pages", src: default_parent_pages_path, class: 'flex-auto', data: {parent_pages_target: "frame"} %>
+</div>

data/app/components/spina/pages/location_component.rb

@@ -0,0 +1,29 @@
+module Spina::Pages
+  class LocationComponent < Spina::ApplicationComponent
+    attr_accessor :f
+    
+    def initialize(f, page = nil)
+      @f = f
+      @page = page
+    end
+    
+    def resources
+      [main_collection_option] + Spina::Resource.order(:label).map do |resource|
+        [ resource.label, resource.id, data: {
+          parent_pages_url:  helpers.spina.admin_parent_pages_path(resource_id: resource.id)
+        }]
+      end
+    end
+    
+    def main_collection_option
+      [t('spina.pages.main_collection'), nil, data: {
+          parent_pages_url: helpers.spina.admin_parent_pages_path
+        }]
+    end
+    
+    def default_parent_pages_path
+      helpers.spina.admin_parent_pages_path(resource_id: @page&.resource_id, parent_id: @page&.parent_id, page_id: @page&.id)
+    end
+    
+  end
+end

data/app/components/spina/pages/page_component.html.erb

@@ -0,0 +1,25 @@
+<li data-id="<%= @page.id %>">
+  <div class="flex items-center border-gray-200 border-b <%= css_class %> bg-opacity-50">
+    <% if sortable? %>
+      <div data-sortable-handle class="p-4 text-gray-300 hover:text-gray-600 cursor-move">
+        <%= helpers.heroicon("menu-alt-4", style: :solid, class: "w-4 h-4 -mr-4") %>
+      </div>
+    <% end %>
+    
+    <%= link_to helpers.spina.edit_admin_page_path(@page), class: "block text-spina font-medium text-sm p-4 hover:text-spina-dark" do %>
+      <%= @page.menu_title %>
+      
+      <small class="font-normal"><%= label %></small>
+    <% end %>
+    
+    <div class='flex-1'></div>
+    <div class="mr-3 flex space-x-2">
+      <%= render Spina::Pages::TranslationsComponent.new(@page) %>
+    </div>
+
+  </div>
+
+  <% if children.any? %>
+    <%= render Spina::Pages::ListComponent.new(pages: children, sortable: sortable) %>
+  <% end %>
+</li>