Replace page selector in link dialog

Use our default page selector also in link dialog. Let the controller resolve the page url and prefill the page selector to reduce the amount of necessary Javascript.

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

@@ -4,8 +4,8 @@
 class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   constructor: (@link_object) ->
-    @url = Alchemy.routes.link_admin_pages_path
     @$link_object = $(@link_object)
+    @url = Alchemy.routes.link_admin_pages_path + "?url="+ encodeURIComponent(@link_object.linkUrl)
     @options =
       size: '600x320'
       title: 'Link'
@@ -15,8 +15,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
   replace: (data) ->
     # let Dialog class handle the content replacement
     super(data)
-    # attach events we handle
-    @attachEvents()
+
     # Store some jQuery objects for further reference
     @$internal_link = $('#internal_link', @dialog_body)
     @$element_anchor = $('#element_anchor', @dialog_body)
@@ -25,16 +24,35 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     @$file_link = $('#file_link', @dialog_body)
     @$overlay_tabs = $('#overlay_tabs', @dialog_body)
     @$page_container = $('#page_selector_container')
+
+    # attach events we handle
+    @attachEvents()
     @initAnchorLinks()
     # if we edit an existing link
     if @link_object
       # we select the correct tab
       @selectTab()
-    @initPageSelect()
     return
 
   # Attaches click events to forms in the link dialog.
   attachEvents: ->
+    # enable the dom selection in internal link tab
+    element_anchor_placeholder = @$element_anchor.attr('placeholder')
+    linkForm = document.querySelector('[data-link-form-type="internal"]')
+    selectedPageId = linkForm.querySelector('alchemy-page-select').pageId
+
+    if selectedPageId
+      @initDomIdSelect(selectedPageId)
+
+    linkForm.addEventListener "Alchemy.PageSelect.ItemRemoved", (e) =>
+      @$element_anchor.val(element_anchor_placeholder)
+      @$element_anchor.select2('destroy').prop('disabled', true)
+
+    linkForm.addEventListener "Alchemy.PageSelect.ItemAdded", (e) =>
+      page = e.detail
+      @$internal_link.val(page.url_path)
+      @initDomIdSelect(page.id)
+
     $('[data-link-form-type]', @dialog_body).on "submit", (e) =>
       e.preventDefault()
       @link_type = e.target.dataset.linkFormType
@@ -48,64 +66,10 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
         target: $("##{@link_type}_link_target").val()
       false
 
-  # Initializes the select2 based Page select
-  initPageSelect: ->
-    pageTemplate = HandlebarsTemplates.page
-    element_anchor_placeholder = @$element_anchor.attr('placeholder')
-    @$internal_link.select2
-      placeholder: Alchemy.t('Search page')
-      allowClear: true
-      minimumInputLength: 3
-      ajax:
-        url: Alchemy.routes.api_pages_path
-        datatype: 'json'
-        quietMillis: 300
-        data: (term, page) ->
-          q:
-            name_cont: term
-          page: page
-        results: (data) ->
-          meta = data.meta
-          results:
-            data.pages.map (page) ->
-              id: page.url_path
-              name: page.name
-              url_path: page.url_path
-              page_id: page.id
-              language: page.language
-              site: page.site
-          more: meta.page * meta.per_page < meta.total_count
-      initSelection: ($element, callback) =>
-        urlname = $element.val()
-        $.get Alchemy.routes.api_pages_path,
-          q:
-            urlname_eq: urlname.replace(/^\/([a-z]{2}(-[A-Z]{2})?\/)?(.+?)\/?$/, '$3')
-          page: 1
-          per_page: 1,
-          (data) =>
-            page = data.pages[0]
-            if page
-              @initDomIdSelect(page.id)
-              callback
-                id: page.url_path
-                name: page.name
-                url_path: page.url_path
-                page_id: page.id
-      formatSelection: (page) ->
-        page.name
-      formatResult: (page) ->
-        pageTemplate(page: page)
-    .on 'change', (event) =>
-      if event.val == ''
-        @$element_anchor.val(element_anchor_placeholder)
-        @$element_anchor.select2('destroy').prop('disabled', true)
-      else
-        @$element_anchor.val('')
-        @initDomIdSelect(event.added.page_id)
-
   # Initializes the select2 based dom id select
   # reveals after a page has been selected
   initDomIdSelect: (page_id) ->
+    @$element_anchor.val('')
     $.get Alchemy.routes.api_ingredients_path, page_id: page_id, (data) =>
       dom_ids = data.ingredients.filter (ingredient) ->
         ingredient.data?.dom_id

app/assets/javascripts/alchemy/templates/index.js

@@ -1,3 +1,2 @@
-//= require alchemy/templates/page
 //= require alchemy/templates/node_folder
 //= require alchemy/templates/page_folder

app/controllers/alchemy/admin/pages_controller.rb

@@ -163,6 +163,14 @@ def destroy
       end
 
       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)]
         }

app/javascript/alchemy_admin/components/page_select.js

@@ -58,6 +58,10 @@ class PageSelect extends RemoteSelect {
       </div>
     `
   }
+
+  get pageId() {
+    return this.selection ? JSON.parse(this.selection)["id"] : undefined
+  }
 }
 
 customElements.define("alchemy-page-select", PageSelect)

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

@@ -7,7 +7,9 @@
     <label for="internal_link" class="control-label">
       <%= Alchemy.t(:page) %>
     </label>
-    <input type="text" id="internal_link" class="alchemy_selectbox full_width">
+    <%= render Alchemy::Admin::PageSelect.new(@page, allow_clear: true) do %>
+      <input type="text" value="<%= @page ? @url : "" %>" id="internal_link">
+    <% end %>
   </div>
   <div class="input select">
     <label for="element_anchor" class="control-label">