Simplify Form Structure of link dialog

Use the same names for each tab entry to simplify the amount of data transformation. Also send the title and the target to the server to prefill the values for these input fields.

app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee

@@ -5,11 +5,16 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   constructor: (@link_object) ->
     @$link_object = $(@link_object)
-    @url = Alchemy.routes.link_admin_pages_path + "?url="+ encodeURIComponent(@link_object.linkUrl) + "&tab=" + @link_object.linkClass
+    url = new URL(Alchemy.routes.link_admin_pages_path, window.location)
+    url.searchParams.set("url", @link_object.linkUrl)
+    url.searchParams.set("tab", @link_object.linkClass)
+    url.searchParams.set("title", @link_object.linkTitle)
+    url.searchParams.set("target", @link_object.linkTarget)
+
     @options =
       size: '600x320'
       title: 'Link'
-    super(@url, @options)
+    super(url.href, @options)
 
   # Called from Dialog class after the url was loaded
   replace: (data) ->
@@ -56,14 +61,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     $('[data-link-form-type]', @dialog_body).on "submit", (e) =>
       e.preventDefault()
       @link_type = e.target.dataset.linkFormType
-      url = $("##{@link_type}_link").val()
-      if @link_type == 'internal' && @$element_anchor.val() != ''
-        url += "##{@$element_anchor.val()}"
-      # Create the link
-      @createLink
-        url: url
-        title: $("##{@link_type}_link_title").val()
-        target: $("##{@link_type}_link_target").val()
+      @createLink Object.fromEntries(new FormData(e.target))
       false
 
   # Initializes the select2 based dom id select
@@ -82,11 +80,8 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
   # Creates a link if no validation errors are present.
   # Otherwise shows an error notice.
   createLink: (options) ->
-    if @link_type == 'external'
-      if @validateURLFormat(options.url)
-        @setLink(options.url, options.title, options.target)
-      else
-        return @showValidationError()
+    if @link_type == 'external' && !options.url.match(Alchemy.link_url_regexp)
+      return @showValidationError()
     else
       @setLink(options.url, options.title, options.target)
     @close()
@@ -123,9 +118,6 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
       @$link = $(@createTempLink())
     else
       return false
-    # Populate title and target fields.
-    $('.link_title', @dialog_body).val @$link.attr('title')
-    $('.link_target', @dialog_body).select2('val', @$link.attr('data-link-target'))
 
   # Creates a temporay 'a' element that holds all values on it.
   createTempLink: ->
@@ -137,13 +129,6 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     tmp_link.classList.add(@link_object.linkClass) if @link_object.linkClass != ''
     tmp_link
 
-  # Validates url for beginning with an protocol.
-  validateURLFormat: (url) ->
-    if url.match(Alchemy.link_url_regexp)
-      true
-    else
-      false
-
   # Shows validation errors
   showValidationError: ->
     $('#errors ul', @dialog_body).html("<li>#{Alchemy.t('url_validation_failed')}</li>")

app/controllers/alchemy/admin/pages_controller.rb

@@ -166,6 +166,8 @@ def link
         @tabs = [:internal, :anchor, :external, :file]
         @tab = params[:tab]&.to_sym
         @url = params[:url]
+        @title = params[:title]
+        @target = params[:target]
 
         if @url && @tab == :internal
           uri = URI(@url)

app/views/alchemy/admin/pages/link.html.erb

@@ -29,21 +29,21 @@
         <div class="input select">
           <% case tab %>
           <% when :internal %>
-            <%= label_tag "internal_link", Alchemy.t(:page), class: "control-label" %>
+            <%= label_tag "url", Alchemy.t(:page), class: "control-label" %>
             <%= render Alchemy::Admin::PageSelect.new(@page, allow_clear: true) do %>
-              <%= text_field_tag "internal_link", @page ? @url : "" %>
+              <%= text_field_tag "url", @page ? @url : "" %>
             <% end %>
           <% when :anchor %>
-            <%= label_tag "anchor_link", Alchemy.t(:anchor), class: "control-label" %>
-            <%= select_tag("anchor_link",
+            <%= label_tag "url", Alchemy.t(:anchor), class: "control-label" %>
+            <%= select_tag("url",
               options_for_select([[Alchemy.t('Please choose'), '']]),
               is: 'alchemy-select') %>
           <% when :external %>
-            <%= label_tag "external_link", Alchemy.t(:url), class: "control-label" %>
-            <%= text_field_tag "external_link", @url %>
+            <%= label_tag "url", Alchemy.t(:url), class: "control-label" %>
+            <%= text_field_tag "url", @url %>
           <% when :file %>
-            <%= label_tag "file_link", Alchemy.t(:file), class: "control-label" %>
-            <%= select_tag "file_link",
+            <%= label_tag "url", Alchemy.t(:file), class: "control-label" %>
+            <%= select_tag "url",
               options_for_select(@attachments),
               prompt: Alchemy.t('Please choose'),
               is: "alchemy-select" %>
@@ -58,14 +58,14 @@
         <% end %>
 
         <div class="input text">
-          <%= label_tag "#{tab}_link_title", Alchemy.t(:link_title), class: "control-label" %>
-          <%= text_field_tag "#{tab}_link_title", '', class: 'link_title' %>
+          <%= label_tag "title", Alchemy.t(:link_title), class: "control-label" %>
+          <%= text_field_tag "title", @title %>
         </div>
 
         <% if tab != :anchor %>
         <div class="input select">
-          <%= label_tag "#{tab}_link_target", Alchemy.t("Open Link in"), class: "control-label" %>
-          <%= select_tag "#{tab}_link_target", options_for_select(Alchemy::Page.link_target_options), class: 'link_target' %>
+          <%= label_tag "target", Alchemy.t("Open Link in"), class: "control-label" %>
+          <%= select_tag "target", options_for_select(Alchemy::Page.link_target_options, @target) %>
         </div>
         <% end %>
         <div class="submit">