Reworked move modal for pages to use the new parents field

blueprints/admin/pages/move.yaml

@@ -2,6 +2,4 @@ form:
   validation: loose
   fields:
     route:
-      type: parents
-      label: PLUGIN_ADMIN.PARENT
-      classes: fancy
+      type: hidden

themes/grav/app/forms/fields/parents.js

@@ -166,14 +166,20 @@ export const b64_decode_unicode = (str) => {
     }).join(''));
 };
 
-$(document).on('click', '[data-field-parents]', (event) => {
+$(document).on('click', '[data-parents]', (event) => {
     event.preventDefault();
     event.stopPropagation();
 
     const target = $(event.currentTarget);
-    const field = target.closest('.parents-wrapper').find('input[name]');
-    const fieldName = field.attr('name');
-    const modal = $('[data-remodal-id="parents"]');
+    let field = target.closest('.parents-wrapper').find('input[name]');
+    let fieldName = field.attr('name');
+
+    if (!field.length) {
+        fieldName = target.data('parents');
+        field = $(`[name="${target.data('parents')}"]`).first();
+    }
+
+    const modal = $(`[data-remodal-id="${target.data('remodalTarget') || 'parents'}"]`);
     const loader = modal.find('.grav-loading');
     const content = modal.find('.parents-content');
 
@@ -195,20 +201,20 @@ $(document).on('click', '[data-field-parents]', (event) => {
                 return true;
             }
 
-            if (!Instances[fieldName]) {
-                Instances[fieldName] = new Parents(content, field, response.data);
+            if (!Instances[`${fieldName}-${modal.data('remodalId')}`]) {
+                Instances[`${fieldName}-${modal.data('remodalId')}`] = new Parents(content, field, response.data);
             } else {
-                Instances[fieldName].finder.reload(response.data);
+                Instances[`${fieldName}-${modal.data('remodalId')}`].finder.reload(response.data);
             }
 
-            modal.data('parents', Instances[fieldName]);
+            modal.data('parents', Instances[`${fieldName}-${modal.data('remodalId')}`]);
 
         }
     });
 });
 
 // apply finder selection to field
-$(document).on('click', '[data-remodal-id="parents"] [data-parents-select]', (event) => {
+$(document).on('click', '[data-remodal-id].parents-container [data-parents-select]', (event) => {
     const modal = $(event.currentTarget).closest('[data-remodal-id]');
     const parents = modal.data('parents');
     const finder = parents.finder;

themes/grav/app/pages/page/move.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 
-$('[data-page-move] button[name="task"][value="save"]').on('click', function() {
-    let route = $('form#blueprints:first select[name="data[route]"]');
+$(document).on('click', '[data-page-move] button[name="task"][value="save"]', (event) => {
+    /* let route = $('form#blueprints:first select[name="data[route]"]');
     let moveTo = $('[data-page-move] select').val();
 
     if (route.length && route.val() !== moveTo) {
@@ -9,5 +9,52 @@ $('[data-page-move] button[name="task"][value="save"]').on('click', function() {
         route.val(moveTo);
 
         if (selectize) selectize.setValue(moveTo);
-    }
+    }*/
+
+    const modal = $(event.currentTarget).closest('[data-remodal-id]');
+    const parents = modal.data('parents');
+    const finder = parents.finder;
+    const field = parents.field;
+    const parentLabel = parents.parentLabel;
+    const parentName = parents.parentName;
+    const selection = finder.findLastActive().item[0];
+    const value = selection._item[finder.config.valueKey];
+    const name = selection._item[finder.config.labelKey];
+
+    field.val(value);
+    parentLabel.text(value);
+    parentName.text(name);
+    finder.config.defaultPath = value;
+
+    $('<div />').css({
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: 15000
+    }).appendTo($('body'));
 });
+
+/*
+$(document).on('click', '[data-remodal-id="parents"] [data-parents-select]', (event) => {
+    const modal = $(event.currentTarget).closest('[data-remodal-id]');
+    const parents = modal.data('parents');
+    const finder = parents.finder;
+    const field = parents.field;
+    const parentLabel = parents.parentLabel;
+    const parentName = parents.parentName;
+    const selection = finder.findLastActive().item[0];
+    const value = selection._item[finder.config.valueKey];
+    const name = selection._item[finder.config.labelKey];
+
+    field.val(value);
+    parentLabel.text(value);
+    parentName.text(name);
+    finder.config.defaultPath = value;
+
+    const remodal = $.remodal.lookup[$(`[data-remodal-id="${modal.data('remodalId')}"]`).data('remodal')];
+    remodal.close();
+});
+*/

themes/grav/scss/template/_forms.scss

@@ -537,11 +537,11 @@ textarea.frontmatter {
     }
 }
 
-[data-remodal-id="parents"] {
+[data-remodal-id].parents-container {
     form {
         overflow: hidden;
     }
-    
+
     form > h1 {
         margin-bottom: 0;
     }
@@ -561,7 +561,7 @@ textarea.frontmatter {
         list-style-type: none;
         text-align: left;
     }
-    
+
     .parents-content:empty {
         display: none;
     }

themes/grav/templates/forms/fields/parents/parents.html.twig

@@ -15,7 +15,7 @@
     {% set name = (scope ~ field.name)|fieldName %}
     {% set parent = page.find(value).title %}
     <div class="parents-wrapper">
-        <div class="form-input-wrapper" data-field-parents="{{ name }}" data-remodal-target="parents">
+        <div class="form-input-wrapper" data-parents="{{ name }}" data-remodal-target="parents">
             <div class="parent-title" data-parents-field-name="{{ name }}">{{ parent }}</div>
             <span><i class="fa fa-folder-o"></i> <span data-parents-field-label="{{ name }}">{{ value|default('<root>') }}</span></span>
         </div>

themes/grav/templates/pages.html.twig

@@ -225,7 +225,7 @@
                 </div>
 
                 <a class="button disable-after-click" href="{{ uri.addNonce(page_url ~ '/task' ~ config.system.param_sep ~ 'copy', 'admin-form', 'admin-nonce') }}" class="page-copy" ><i class="fa fa-copy"></i> {{ "PLUGIN_ADMIN.COPY"|tu }}</a>
-                <a class="button" href="#" data-remodal-target="move"><i class="fa fa-arrows"></i> {{ "PLUGIN_ADMIN.MOVE"|tu }}</a>
+                <a class="button" href="#" data-remodal-target="move" data-parents="data[route]"><i class="fa fa-arrows"></i> {{ "PLUGIN_ADMIN.MOVE"|tu }}</a>
                 {% if config.plugins['admin-pro'].enabled %}
                     <a class="button" href="#" data-remodal-target="revisions"><i class="fa fa-history"></i> {{ "PLUGIN_ADMIN_PRO.REVISIONS"|tu }}</a>
                 {% endif %}
@@ -383,7 +383,7 @@
 
 
     {% if mode == 'edit' %}
-    <div class="remodal" data-remodal-id="parents" data-remodal-options="hashTracking: false">
+    <div class="remodal parents-container" data-remodal-id="parents" data-remodal-options="hashTracking: false">
         <form>
             <h1>Parents</h1>
             <div class="grav-loading"><div class="grav-loader">Loading...</div></div>
@@ -394,7 +394,7 @@
             </div>
         </form>
     </div>
-    <div class="remodal" data-remodal-id="move" data-remodal-options="hashTracking: false">
+    <div class="remodal parents-container" data-remodal-id="move" data-remodal-options="hashTracking: false">
         {% include 'partials/page-move.html.twig' with { blueprints: admin.blueprints('admin/pages/move'), data: context } %}
     </div>
     <div class="remodal" data-remodal-id="revisions" data-remodal-options="hashTracking: false">

themes/grav/templates/partials/page-move.html.twig

@@ -2,6 +2,10 @@
 {% set scope = scope ?: 'data.' %}
 
 <form id="{{ form_id }}" method="post" data-grav-form="{{ form_id }}" data-page-move>
+    <h1>Move</h1>
+    <div class="grav-loading"><div class="grav-loader">Loading...</div></div>
+    <div class="parents-content"></div>
+
     {% for field in blueprints.fields %}
         {% if field.type %}
             {% set value = field.name ? data.value(field.name) : data.toArray %}