maglevcms 2.1.0 → 3.0.0.beta1

data/app/components/maglev/uikit/section_toolbar/bottom_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module SectionToolbar
+      class BottomComponent < Maglev::Uikit::BaseComponent
+        attr_reader :paths, :options
+
+        def initialize(paths:, options:)
+          @paths = paths
+          @options = options
+        end
+
+        def insert_button?
+          options[:insert_button].nil? || !!options[:insert_button]
+        end
+
+        def button_classes
+          %(bg-editor-primary pointer-events-auto cursor-pointer
+            flex items-center justify-center h-8 w-8 rounded-full
+            text-white/75 hover:text-white relative top-4
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/section_toolbar/section_toolbar_component.html.erb

@@ -0,0 +1,17 @@
+<div 
+  data-controller="uikit-section-toolbar"
+  class="h-48 absolute pointer-events-none transition duration-200 ease-in-out hidden group/section-toolbar mx-auto w-full"
+  data-action="
+    editor-page-preview:scale-ratio-updated@window->uikit-section-toolbar#onScaleRatioUpdated
+    client:section:hover@window->uikit-section-toolbar#onHover
+    client:section:leave@window->uikit-section-toolbar#onLeave
+    client:scroll@window->uikit-section-toolbar#onWindowScroll
+  "
+  data-uikit-section-toolbar-id-value="<%= id %>"
+>
+  <div class="w-full h-full relative mx-auto border-solid border-0 border-t-4 border-b-4 border-editor-primary group-[.is-leaving]/section-toolbar:border-transparent transition-border duration-200 ease-in-out">
+    <%= render Maglev::Uikit::SectionToolbar::TopLeftCornerComponent.new(label: label) %>
+    <%= render Maglev::Uikit::SectionToolbar::TopRightCornerComponent.new(id: id, paths: paths, options: options) %>
+    <%= render Maglev::Uikit::SectionToolbar::BottomComponent.new(paths: paths, options: options) %>
+  </div>
+</div>

data/app/components/maglev/uikit/section_toolbar/section_toolbar_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module SectionToolbar
+      class SectionToolbarComponent < ViewComponent::Base
+        attr_reader :id, :label, :paths, :options
+
+        def initialize(id:, label:, paths:, options: {})
+          @id = id
+          @label = label
+          @paths = paths
+          @options = options
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/section_toolbar/section_toolbar_controller.js

@@ -0,0 +1,90 @@
+import { Controller } from '@hotwired/stimulus'
+import { enter, leave } from "el-transition"
+
+export default class extends Controller {
+  static values = { id: String }
+  static targets = ['topLeftCorner', 'topRightCorner', 'bottom']
+  
+  connect() {
+    this.previewScaleRatioValue = 1
+  }
+
+  onHover(event) {
+    const { sectionId, sectionRect, sectionOffsetTop } = event.detail
+
+    if (sectionId !== this.idValue) {
+      // trick to avoid having 2 section toolbars visible at the same time (especially when hovering the + button)
+      this.hideEverything()
+      return
+    }
+
+    this.applyStyle(
+      this.calculateStyle(sectionRect, sectionOffsetTop || 0)
+    )
+    
+    this.keepTransitionIntegrity(this.revealEverything.bind(this))    
+  }
+
+  onLeave() {
+    this.keepTransitionIntegrity(this.hideEverything.bind(this))    
+  }
+
+  onScaleRatioUpdated(event) {
+    this.previewScaleRatioValue = event.detail.value
+  }
+
+  onWindowScroll() {
+    this.hideEverything()
+  }
+
+  applyStyle(style) {
+    Object.entries(style).forEach(
+      ([key, value]) => (this.element.style[key] = value),
+    )
+  }
+  
+  calculateStyle(sectionRect, minTop) {
+    const isSticky = sectionRect.top < minTop
+    const top = isSticky ? minTop : sectionRect.top
+    const height = isSticky
+      ? sectionRect.height - (minTop - sectionRect.top)
+      : sectionRect.height
+    
+    return {
+      top: `${top * this.previewScaleRatioValue}px`,
+      left: `calc((${sectionRect.left}px * ${this.previewScaleRatioValue}))`,
+      height: `${height * this.previewScaleRatioValue}px`,
+      width: `calc(${sectionRect.width}px * ${this.previewScaleRatioValue})`,
+    }
+  }
+
+  revealEverything() {
+    this.element.classList.remove('hidden')
+    Promise.all([
+      enter(this.topLeftCornerTarget),
+      enter(this.topRightCornerTarget),
+      enter(this.bottomTarget),
+    ])
+  }
+
+  hideEverything() {
+    // do nothing if the section toolbar is already hidden
+    if (this.element.classList.contains('hidden') || this.element.classList.contains('is-leaving')) return
+
+    this.element.classList.add('is-leaving')
+    Promise.all([
+      leave(this.topLeftCornerTarget),
+      leave(this.topRightCornerTarget),
+      leave(this.bottomTarget),
+    ]).then(() => {
+      this.element.classList.add('hidden')
+      this.element.classList.remove('is-leaving')
+    })
+  }
+
+  keepTransitionIntegrity(fn) {
+    if (this.transitionTimeout) clearTimeout(this.transitionTimeout)
+    fn()
+    this.transitionTimeout = setTimeout(() => fn(), 200)
+  }
+}

data/app/components/maglev/uikit/section_toolbar/top_left_corner_component.html.erb

@@ -0,0 +1,16 @@
+<div 
+  class="absolute top-0 left-0 mt-2 ml-2 flex hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
+  data-uikit-section-toolbar-target="topLeftCorner"
+  data-transition-enter="duration-200"
+  data-transition-enter-start="-translate-x-[50%] opacity-0"
+  data-transition-enter-end="translate-x-0 opacity-100"
+  data-transition-leave="duration-200"
+  data-transition-leave-start="translate-x-0 opacity-100"
+  data-transition-leave-end="-translate-x-[50%] opacity-0"
+>
+  <div
+    class="bg-editor-primary text-white py-1 px-3 rounded-l-2xl rounded-r-2xl text-xs flex items-center"    
+  >
+    <span><%= label %></span>
+  </div>  
+</div>

data/app/components/maglev/uikit/section_toolbar/top_left_corner_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module SectionToolbar
+      class TopLeftCornerComponent < Maglev::Uikit::BaseComponent
+        attr_reader :label
+
+        def initialize(label:)
+          @label = label
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/section_toolbar/top_right_corner_component.html.erb

@@ -0,0 +1,28 @@
+<div class="absolute top-0 right-0 mt-2 mr-2 flex justify-center gap-x-2 hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
+  data-uikit-section-toolbar-target="topRightCorner"
+  data-transition-enter="duration-200"
+  data-transition-enter-start="translate-x-[50%] opacity-0"
+  data-transition-enter-end="translate-x-0 opacity-100"
+  data-transition-leave="duration-200"
+  data-transition-leave-start="translate-x-0 opacity-100"
+  data-transition-leave-end="translate-x-[50%] opacity-0"
+>
+  <%= link_to paths[:edit], class: button_classes, data: { turbo_frame: '_top' } do %>
+    <%= render Maglev::Uikit::IconComponent.new(name: 'pencil') %>
+  <% end %>
+
+  <%= link_to paths[:blocks], class: button_classes, data: { turbo_frame: '_top' } do %>
+    <%= render Maglev::Uikit::IconComponent.new(name: 'settings') %>
+  <% end if blocks? %>
+
+  <%= button_to paths[:delete], method: :delete, class: button_classes, 
+    data: { turbo_method: :delete, turbo_confirm: t('maglev.editor.sections.index.confirm_delete') }, 
+    form: { 
+      data: { 
+        action: 'turbo:submit-end->editor-preview-notification-center#deleteSection',
+        'editor-preview-notification-center-section-id-param': id
+      } 
+    } do %>
+    <%= render Maglev::Uikit::IconComponent.new(name: 'delete_bin') %>
+  <% end %>
+</div>

data/app/components/maglev/uikit/section_toolbar/top_right_corner_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module SectionToolbar
+      class TopRightCornerComponent < Maglev::Uikit::BaseComponent
+        attr_reader :id, :paths, :options
+
+        def initialize(id:, paths:, options:)
+          @id = id
+          @paths = paths
+          @options = options
+        end
+
+        def blocks?
+          !!options[:has_blocks]
+        end
+
+        def button_classes
+          %(relative bg-white z-50 rounded-full shadow-xl h-8 w-8
+            flex items-center justify-center
+            text-gray-700 pointer-events-auto hover:text-black cursor-pointer
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/tabs_component/tabs_component.html.erb

@@ -0,0 +1,35 @@
+<div 
+  class="<%= container_classes %>"
+  data-controller="uikit-tabs"
+  data-uikit-tabs-active-class-value="<%= label_classes(active: true) %>"
+  data-uikit-tabs-inactive-class-value="<%= label_classes(active: false) %>"
+  data-uikit-tabs-disable-inputs-value="<%= disable_inputs? %>"
+>
+  <input type="hidden" name="active_tab" value="<%= active_tab_index %>" data-uikit-tabs-target="hiddenInput" />  
+
+  <nav>
+    <ul class="flex flex-col sm:flex-row">
+      <% tabs.each_with_index do |tab, index| %>
+        <li>
+          <% if tab.link? %>
+            <%= link_to tab.label, tab.link[:url], class: label_classes(active: tab.active?), **tab.link_html_options %>
+          <% else %>
+            <%= link_to tab.label, '#', class: label_classes(active: tab.active?), data: { 
+              uikit_tabs_target: 'tab', 
+              action: 'click->uikit-tabs#activateTab:prevent', 
+              tab_index: index
+            } %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
+
+  <div class="relative -mt-0.5"><div class="w-full border-gray-200 border-t-2 h-0"></div></div>
+
+  <% tabs.each_with_index do |tab, index| %>
+    <div data-uikit-tabs-target="tabContent" class="flex-1 mt-4 pt-2 pb-4 overflow-y-auto overflow-x-visible <%= 'hidden' unless tab.active? %>">
+      <%= capture(&tab.block) if tab.block? %>
+    </div>
+  <% end %>
+</div>

data/app/components/maglev/uikit/tabs_component/tabs_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['tab', 'tabContent', 'hiddenInput']
+  static values = {
+    activeClass: String,
+    inactiveClass: String,
+    disableInputs: Boolean
+  }
+
+  connect() {
+    this.activeClasses = this.activeClassValue.replace(/\s+|\s+/g, ' ').trim().split(' ')
+    this.inactiveClasses = this.inactiveClassValue.replace(/\s+|\s+/g, ' ').trim().split(' ')
+
+    this.tabContentTargets.forEach(content => {
+      this.changeInputDisabled(content, content.classList.contains('hidden'))
+    })
+  }
+
+  activateTab(event) {
+    const tab = event.currentTarget
+    const tabContent = this.tabContentTargets[tab.dataset.tabIndex]
+
+    this.updateTab(tab)
+    this.updateTabContent(tabContent)
+
+    this.hiddenInputTarget.value = tab.dataset.tabIndex
+  }
+
+  updateTab(activeTab) {
+    this.tabTargets.forEach(tab => {
+      tab.classList.remove(...this.activeClasses)
+      tab.classList.add(...this.inactiveClasses)
+    })
+
+    activeTab.classList.remove(...this.inactiveClasses)
+    activeTab.classList.add(...this.activeClasses)
+  }
+
+  updateTabContent(activeTabContent) {
+    this.tabContentTargets.forEach(content => {
+      content.classList.add('hidden')
+      this.changeInputDisabled(content, true)
+    })
+
+    activeTabContent.classList.remove('hidden')
+    this.changeInputDisabled(activeTabContent, false)
+  }
+
+  changeInputDisabled(tabContent, disabled) {
+    if (!this.disableInputsValue) return
+
+    tabContent.querySelectorAll('input, select, textarea').forEach(input => {
+      input.disabled = disabled
+    })
+  }
+}

data/app/components/maglev/uikit/tabs_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class TabsComponent < Maglev::Uikit::BaseComponent
+      renders_many :tabs, lambda { |label:, active: false, link: nil, &block|
+        Tab.new(self, label: label, active: active, link: link, block: block)
+      }
+
+      attr_reader :container_classes, :active_tab, :active_tab_index, :disable_inputs
+
+      # disable_inputs: true | false (default: false) if true, the inputs of hidden tabs will not be submitted
+      def initialize(container_classes: nil, active_tab_index: nil, disable_inputs: false)
+        @container_classes = container_classes
+        @active_tab_index = active_tab_index
+        @disable_inputs = disable_inputs
+      end
+
+      def label_classes(...)
+        class_variants(
+          base: %(
+            relative py-1 pb-0 px-4 block focus:outline-none border-b-2
+            z-10 font-medium hover:text-editor-primary
+          ),
+          variants: {
+            active: 'text-editor-primary border-editor-primary',
+            '!active': 'text-gray-500 border-transparent'
+          }
+        ).render(...)
+      end
+
+      def before_render
+        @active_tab = tabs.find(&:active?) || tabs[active_tab_index.to_i]
+        @active_tab.active = true
+      end
+
+      def disable_inputs?
+        @disable_inputs
+      end
+
+      class Tab < Maglev::Uikit::BaseComponent
+        attr_reader :label, :block, :link
+        attr_writer :active
+
+        def initialize(component, label:, active:, link:, block: nil)
+          @component = component
+          @label = label
+          @active = active
+          @link = link
+          @block = block
+        end
+
+        def active?
+          @active
+        end
+
+        def block?
+          @block.present?
+        end
+
+        def link?
+          @link.present?
+        end
+
+        def link_html_options
+          @link[:html_options] || {}
+        end
+      end
+    end
+  end
+end

data/app/controllers/concerns/maglev/content_locale_concern.rb

@@ -7,7 +7,7 @@ module Maglev
     included do
       alias_method :maglev_content_locale, :content_locale
 
-      helper_method :maglev_content_locale, :content_locale
+      helper_method :maglev_content_locale, :content_locale, :default_content_locale?
     end
 
     private
@@ -24,5 +24,9 @@ module Maglev
     def default_content_locale
       maglev_site.default_locale.prefix
     end
+
+    def default_content_locale?
+      content_locale.to_s == default_content_locale
+    end
   end
 end

data/app/controllers/concerns/maglev/editor/errors_concern.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module ErrorsConcern
+      extend ActiveSupport::Concern
+
+      included do
+        around_action :handle_editor_errors
+
+        rescue_from ActiveRecord::StaleObjectError, with: :handle_stale_object
+      end
+
+      private
+
+      def handle_stale_object
+        respond_to do |format|
+          format.turbo_stream { render 'maglev/editor/shared/errors/stale_object_error' }
+          format.html { redirect_to editor_root_path }
+        end
+      end
+
+      def handle_editor_errors
+        yield
+      rescue Maglev::Errors::NotAuthorized
+        raise # Let the main app handle this one
+      rescue StandardError => e
+        respond_to do |format|
+          format.turbo_stream { render_turbo_stream_standard_error(e) }
+          format.html { raise(e) }
+        end
+      end
+
+      def render_turbo_stream_standard_error(error)
+        track_maglev_error(error)
+        render 'maglev/editor/shared/errors/standard_error', status: :internal_server_error
+      end
+
+      def track_maglev_error(error)
+        Rails.logger.error "[Maglev] Error: #{error.message}"
+        Rails.logger.error error.backtrace.join("\n")
+      end
+    end
+  end
+end

data/app/controllers/concerns/maglev/fetchers_concern.rb

@@ -35,10 +35,10 @@ module Maglev
       )
     end
 
-    def fetch_maglev_page_sections(page_sections = nil)
+    def fetch_maglev_page_sections(section_id: nil)
       @fetch_maglev_page_sections ||= maglev_services.get_page_sections.call(
         page: fetch_maglev_page,
-        page_sections: page_sections,
+        section_id: section_id,
         locale: content_locale
       )
     end
@@ -115,10 +115,7 @@ module Maglev
     end
 
     def maglev_style
-      maglev_services.fetch_style.call(
-        site: maglev_site,
-        theme: maglev_theme
-      )
+      maglev_services.fetch_style.call
     end
   end
 end

data/app/controllers/concerns/maglev/flash_i18n_concern.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Maglev
+  module FlashI18nConcern
+    private
+
+    def flash_t(type, **opts)
+      t("maglev.editor.flash.#{controller_name}.#{action_name}.#{type}", **opts)
+    end
+  end
+end

data/app/controllers/maglev/application_controller.rb

@@ -7,12 +7,6 @@ module Maglev
 
     protect_from_forgery with: :exception
 
-    helper_method :services, :use_engine_vite?
-
-    private
-
-    def use_engine_vite?
-      true
-    end
+    helper_method :services
   end
 end

data/app/controllers/maglev/editor/assets_controller.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    class AssetsController < Maglev::Editor::BaseController
+      include ::ActiveStorage::SetCurrent
+      include ::Pagy::Backend
+
+      before_action :ensure_turbo_frame_request, only: [:index]
+
+      helper_method :query_params
+
+      layout false
+
+      def index
+        @pagy, @assets = pagy(resources.search(params[:query], params[:asset_type]), limit: per_page)
+      end
+
+      def create
+        resources.create!(asset_params)
+        flash[:notice] = flash_t(:success, count: params[:number_of_assets].presence || 1)
+        head :created, location: editor_assets_path
+      end
+
+      def destroy
+        asset = resources.find(resource_id)
+        asset.destroy!
+        redirect_to editor_assets_path(query_params(pagination: true)),
+                    notice: flash_t(:success, name: asset.file.filename), status: :see_other
+      end
+
+      private
+
+      def asset_params
+        params.require(:asset).permit(:file)
+      end
+
+      def per_page
+        16 # TODO: make this configurable
+      end
+
+      def resources
+        ::Maglev::Asset
+      end
+
+      def assets_path_with_context
+        editor_assets_path({
+          picker: params[:picker],
+          source: params[:source]
+        }.compact_blank)
+      end
+
+      def query_params(pagination: false)
+        base = { picker: params[:picker], source: params[:source] }
+        (pagination ? base.merge(query: params[:query], page: params[:page]) : base).compact_blank
+      end
+    end
+  end
+end