diff --git a/app/components/alchemy/admin/pages/anchor_tab.rb b/app/components/alchemy/admin/pages/anchor_tab.rb
new file mode 100644
index 0000000000..b08ebac857
--- /dev/null
+++ b/app/components/alchemy/admin/pages/anchor_tab.rb
@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Alchemy
+ module Admin
+ module Pages
+ class AnchorTab < BaseLinkTab
+ def title
+ Alchemy.t("link_overlay_tab_label.anchor")
+ end
+
+ def type
+ :anchor
+ end
+
+ def fields
+ [
+ anchor_select,
+ title_input
+ ]
+ end
+
+ def message
+ content_tag("h3", Alchemy.t(:anchor_link_headline))
+ end
+
+ private
+
+ def anchor_select
+ label = label_tag("anchor_link", Alchemy.t(:anchor), class: "control-label")
+ select = select_tag(:anchor_link,
+ options_for_select([[Alchemy.t("Please choose"), ""]]),
+ is: "alchemy-select")
+ content_tag("div", label + select, class: "input select")
+ end
+ end
+ end
+ end
+end
diff --git a/app/components/alchemy/admin/pages/base_link_tab.rb b/app/components/alchemy/admin/pages/base_link_tab.rb
new file mode 100644
index 0000000000..8060bfd940
--- /dev/null
+++ b/app/components/alchemy/admin/pages/base_link_tab.rb
@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Alchemy
+ module Admin
+ module Pages
+ class BaseLinkTab < ViewComponent::Base
+ delegate :render_message, to: :helpers
+
+ def initialize(url)
+ @url = url
+ end
+
+ def title
+ raise ArgumentError, "The tab needs to have a title"
+ end
+
+ def type
+ raise ArgumentError, "The tab needs to have a panel type"
+ end
+
+ def fields
+ []
+ end
+
+ def message
+ nil
+ end
+
+ def call
+ content = message ? render_message(:info, message) : ""
+ content += content_tag("div", content_tag("ul"), id: "errors", class: "errors")
+ content += fields.join("").html_safe + submit_button
+
+ form = content_tag("form", content.html_safe, {"data-link-form-type": type})
+
+ panel_name = "overlay_tab_#{type}_link"
+ content_tag("sl-tab", title, slot: "nav", panel: panel_name, active: type == @tab.to_sym) +
+ content_tag("sl-tab-panel", form, name: panel_name)
+ end
+
+ private
+
+ def title_input
+ name = "#{type}_link_title"
+ label = label_tag(name, Alchemy.t(:link_title), class: "control-label")
+ input = text_field_tag name, "", class: "link_title"
+ content_tag("div", label + input, class: "input text")
+ end
+
+ def target_select
+ name = "#{type}_link_target"
+ label = label_tag(name, Alchemy.t("Open Link in"), class: "control-label")
+ select = select_tag(name, options_for_select(Alchemy::Page.link_target_options, @target), class: "link_target")
+ content_tag("div", label + select, class: "input select")
+ end
+
+ def submit_button
+ content_tag("div", button_tag(Alchemy.t(:apply)), {class: "submit"})
+ end
+ end
+ end
+ end
+end
diff --git a/app/components/alchemy/admin/pages/external_tab.rb b/app/components/alchemy/admin/pages/external_tab.rb
new file mode 100644
index 0000000000..a99ebba98d
--- /dev/null
+++ b/app/components/alchemy/admin/pages/external_tab.rb
@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Alchemy
+ module Admin
+ module Pages
+ class ExternalTab < BaseLinkTab
+ def title
+ Alchemy.t("link_overlay_tab_label.external")
+ end
+
+ def type
+ :external
+ end
+
+ def fields
+ [
+ url_input,
+ title_input,
+ target_select
+ ]
+ end
+
+ def message
+ content_tag("h3", Alchemy.t(:enter_external_link)) +
+ content_tag("p", Alchemy.t(:external_link_notice_1)) +
+ content_tag("p", Alchemy.t(:external_link_notice_2))
+ end
+
+ private
+
+ def url_input
+ label = label_tag("external_link", Alchemy.t(:url), class: "control-label")
+ input = text_field_tag "external_link", ""
+ content_tag("div", label + input, class: "input text")
+ end
+ end
+ end
+ end
+end
diff --git a/app/components/alchemy/admin/pages/file_tab.rb b/app/components/alchemy/admin/pages/file_tab.rb
new file mode 100644
index 0000000000..92eae1487a
--- /dev/null
+++ b/app/components/alchemy/admin/pages/file_tab.rb
@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Alchemy
+ module Admin
+ module Pages
+ class FileTab < BaseLinkTab
+ delegate :alchemy, to: :helpers
+
+ def title
+ Alchemy.t("link_overlay_tab_label.file")
+ end
+
+ def type
+ :file
+ end
+
+ def fields
+ [
+ attachment_select,
+ title_input,
+ target_select
+ ]
+ end
+
+ def message
+ content_tag("h3", Alchemy.t(:choose_file_to_link))
+ end
+
+ private
+
+ def attachments
+ @_attachments ||= Attachment.all.collect { |f|
+ [f.name, alchemy.download_attachment_path(id: f.id, name: f.slug)]
+ }
+ end
+
+ def attachment_select
+ label = label_tag("file_link", Alchemy.t(:file), class: "control-label")
+ select = select_tag "file_link",
+ options_for_select(attachments),
+ prompt: Alchemy.t("Please choose"),
+ is: "alchemy-select"
+ content_tag("div", label + select, class: "input select")
+ end
+ end
+ end
+ end
+end
diff --git a/app/components/alchemy/admin/pages/internal_tab.rb b/app/components/alchemy/admin/pages/internal_tab.rb
new file mode 100644
index 0000000000..eb54b16ebc
--- /dev/null
+++ b/app/components/alchemy/admin/pages/internal_tab.rb
@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Alchemy
+ module Admin
+ module Pages
+ class InternalTab < BaseLinkTab
+ def title
+ Alchemy.t("link_overlay_tab_label.internal")
+ end
+
+ def type
+ :internal
+ end
+
+ def fields
+ [
+ page_select,
+ dom_id_select,
+ title_input,
+ target_select
+ ]
+ end
+
+ def message
+ content_tag("h3", Alchemy.t(:internal_link_headline)) +
+ content_tag("p", Alchemy.t(:internal_link_page_elements_explanation))
+ end
+
+ private
+
+ def page
+ @_page ||= @url ? Alchemy::Page.find_by(urlname: URI(@url).path[1..]) : nil
+ end
+
+ def dom_id_select
+ label = label_tag("element_anchor", Alchemy.t(:anchor), class: "control-label")
+ input = text_field_tag("element_anchor", nil, {id: "element_anchor", class: "alchemy_selectbox full_width", disabled: true, placeholder: Alchemy.t("Select a page first")})
+ content_tag("div", label + input, class: "input select")
+ end
+
+ def page_select
+ label = label_tag("internal_link", Alchemy.t(:page), class: "control-label")
+ input = text_field_tag("internal_link", page ? @url : "", id: "internal_link")
+ page_select = render Alchemy::Admin::PageSelect.new(page, allow_clear: true).with_content(input)
+ content_tag("div", label + page_select, class: "input select")
+ end
+ end
+ end
+ end
+end
diff --git a/app/controllers/alchemy/admin/pages_controller.rb b/app/controllers/alchemy/admin/pages_controller.rb
index 68041f19f3..6b0a5535cf 100644
--- a/app/controllers/alchemy/admin/pages_controller.rb
+++ b/app/controllers/alchemy/admin/pages_controller.rb
@@ -164,16 +164,6 @@ def destroy
def link
@url = params[:url]
- @page = nil
-
- if @url
- uri = URI(@url)
- @page = Alchemy::Page.find_by(urlname: uri.path[1..])
- end
-
- @attachments = Attachment.all.collect { |f|
- [f.name, download_attachment_path(id: f.id, name: f.slug)]
- }
end
def fold
diff --git a/app/views/alchemy/admin/pages/_anchor_link.html.erb b/app/views/alchemy/admin/pages/_anchor_link.html.erb
deleted file mode 100644
index 64b44e4e50..0000000000
--- a/app/views/alchemy/admin/pages/_anchor_link.html.erb
+++ /dev/null
@@ -1,22 +0,0 @@
-
diff --git a/app/views/alchemy/admin/pages/_external_link.html.erb b/app/views/alchemy/admin/pages/_external_link.html.erb
deleted file mode 100644
index e6e21653b5..0000000000
--- a/app/views/alchemy/admin/pages/_external_link.html.erb
+++ /dev/null
@@ -1,31 +0,0 @@
-
diff --git a/app/views/alchemy/admin/pages/_file_link.html.erb b/app/views/alchemy/admin/pages/_file_link.html.erb
deleted file mode 100644
index 355d3adaf5..0000000000
--- a/app/views/alchemy/admin/pages/_file_link.html.erb
+++ /dev/null
@@ -1,31 +0,0 @@
-
diff --git a/app/views/alchemy/admin/pages/_internal_link.html.erb b/app/views/alchemy/admin/pages/_internal_link.html.erb
deleted file mode 100644
index 29e1489879..0000000000
--- a/app/views/alchemy/admin/pages/_internal_link.html.erb
+++ /dev/null
@@ -1,37 +0,0 @@
-
diff --git a/app/views/alchemy/admin/pages/link.html.erb b/app/views/alchemy/admin/pages/link.html.erb
index 733e4a51be..4ea4c67ea9 100644
--- a/app/views/alchemy/admin/pages/link.html.erb
+++ b/app/views/alchemy/admin/pages/link.html.erb
@@ -1,26 +1,6 @@
-
- <%= Alchemy.t('link_overlay_tab_label.internal') %>
-
-
- <%= Alchemy.t('link_overlay_tab_label.anchor') %>
-
-
- <%= Alchemy.t('link_overlay_tab_label.external') %>
-
-
- <%= Alchemy.t('link_overlay_tab_label.file') %>
-
-
- <%= render partial: 'internal_link' %>
-
-
- <%= render partial: 'anchor_link' %>
-
-
- <%= render partial: 'external_link' %>
-
-
- <%= render partial: 'file_link' %>
-
+ <% tabs = [Alchemy::Admin::Pages::InternalTab, Alchemy::Admin::Pages::AnchorTab, Alchemy::Admin::Pages::ExternalTab, Alchemy::Admin::Pages::FileTab] %>
+ <% tabs.each do |tab| %>
+ <%= render tab.new(@url) %>
+ <% end %>
diff --git a/config/locales/alchemy.en.yml b/config/locales/alchemy.en.yml
index acfa3a3cb9..8f7363adf0 100644
--- a/config/locales/alchemy.en.yml
+++ b/config/locales/alchemy.en.yml
@@ -670,6 +670,7 @@ en:
delete_user: "Delete this user"
edit_user: "Edit the user´s properties."
"No users found": "No users found."
+ url: "Url"
# Kaminari pagination translations
pagination:
diff --git a/spec/components/alchemy/admin/pages/base_link_tab_spec.rb b/spec/components/alchemy/admin/pages/base_link_tab_spec.rb
new file mode 100644
index 0000000000..0b9f806874
--- /dev/null
+++ b/spec/components/alchemy/admin/pages/base_link_tab_spec.rb
@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+class TestTab < Alchemy::Admin::Pages::BaseLinkTab
+ delegate :render_message, to: :helpers
+
+ def title
+ "Test Tab"
+ end
+
+ def type
+ :test
+ end
+
+ def fields
+ [
+ title_input,
+ target_select
+ ]
+ end
+end
+
+RSpec.describe Alchemy::Admin::Pages::BaseLinkTab, type: :component do
+ before do
+ render_inline(TestTab.new("/foo"))
+ end
+
+ it "should render a tab with a panel" do
+ expect(page).to have_selector("sl-tab[panel='overlay_tab_test_link']")
+ expect(page).to have_selector("sl-tab-panel[name='overlay_tab_test_link']")
+ end
+
+ it "should have a title" do
+ expect(page).to have_text("Test Tab")
+ end
+
+ it "should allow to add title input" do
+ expect(page).to have_selector("input[name=test_link_title]")
+ end
+
+ it "should allow to add target select" do
+ expect(page).to have_selector("select[name=test_link_target]")
+ end
+end
diff --git a/spec/features/admin/link_overlay_spec.rb b/spec/features/admin/link_overlay_spec.rb
index 42d02d1531..a939eadd99 100644
--- a/spec/features/admin/link_overlay_spec.rb
+++ b/spec/features/admin/link_overlay_spec.rb
@@ -95,7 +95,7 @@
within "[name='overlay_tab_external_link']" do
expect(page).to have_selector("#external_link")
- fill_in("URL", with: "https://example.com")
+ fill_in("Url", with: "https://example.com")
click_button "apply"
end