Added refresh action button for Folder to ease the regeneration of the slug based on the title. Available also as API entry Grav.default.Forms.Fields.FolderField.Regenerate() (#1738)

CHANGELOG.md

@@ -1,6 +1,8 @@
 # v1.10.13
 ## mm/dd/2021
 
+1. [](#new)
+    * Added refresh action button for Folder to ease the regeneration of the slug based on the title. Available also as API entry `Grav.default.Forms.Fields.FolderField.Regenerate()` [#1738](https://github.com/getgrav/grav-plugin-admin/issues/1738)
 1. [](#improved)
     * Removed sourcemaps references from fork-awesome.min.css [#2122](https://github.com/getgrav/grav-plugin-admin/issues/2122)
     * Support native spell checkers in CodeMirror editor [#1266](https://github.com/getgrav/grav-plugin-admin/issues/1266)

languages/en.yaml

@@ -1106,3 +1106,4 @@ PLUGIN_ADMIN:
   IMAGES_CLS_ASPECT_RATIO_HELP: "Optional CSS variable that gets applied via a 'style' attribute which can be used in CSS for custom styling"
   IMAGES_CLS_RETINA_SCALE: "Retina Scale Factor"
   IMAGES_CLS_RETINA_SCALE_HELP: "Will take the calculated size and divide by scale factor to display a higher resolution image at a smaller pixel size for better handling of HiDPI resolutions"
+  AUTOREGENERATE_FOLDER_SLUG: "Auto-regenerate based on page title"

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

@@ -0,0 +1,20 @@
+import $ from 'jquery';
+
+const Regenerate = (field = '[name="data[folder]"]') => {
+    const element = $(field);
+    const title = $('[name="data[header][title]"]');
+    const slug = $.slugify(title.val(), {custom: {"'": ''}});
+
+    element.addClass('highlight').val(slug);
+
+    setTimeout(() => element.removeClass('highlight'), 500);
+};
+
+$(document).on('click', '[data-regenerate]', (event) => {
+    const target = $(event.currentTarget);
+    const field = $(target.data('regenerate'));
+
+    Regenerate(field);
+});
+
+export default Regenerate;

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

@@ -6,6 +6,7 @@ import DateTimeField, { Instance as DateTimeFieldInstance } from './datetime';
 import EditorField, { Instance as EditorFieldInstance } from './editor';
 import ColorpickerField, { Instance as ColorpickerFieldInstance } from './colorpicker';
 import FilesField, { Instance as FilesFieldInstance } from './files';
+import FolderFieldInstance from './folder';
 import SelectUniqueField, { Instance as SelectUniqueInstance } from './selectunique';
 import IconpickerField, { Instance as IconpickerInstance } from './iconpicker';
 import CronField, { Instance as CronFieldInstance } from './cron';
@@ -52,6 +53,9 @@ export default {
         FilesField,
         Instance: FilesFieldInstance
     },
+    FolderField: {
+        Regenerate: FolderFieldInstance
+    },
     SelectUniqueField: {
         SelectUniqueField,
         Instance: SelectUniqueInstance

themes/grav/css-compiled/preset.css

@@ -438,6 +438,9 @@ form .form-input-wrapper .form-input-addon {
     form .form-input-wrapper .form-input-addon.copy-to-clipboard:hover {
       background: #007fc0; }
 
+form .form-input-wrapper input[name="data[folder]"].highlight {
+  background-color: #ffffd7; }
+
 form .selectize-control.single.plugin-remove_button .selectize-input .item, form .selectize-control.single.plugin-remove_button .selectize-input .remove-single,
 form .selectize-control.multi .selectize-input .item,
 form .selectize-control.multi .selectize-input .remove-single {

themes/grav/css-compiled/template.css

@@ -961,9 +961,13 @@ form .form-input-addon-wrapper {
     align-items: center; }
     form .form-input-addon-wrapper .form-input-addon.copy-to-clipboard {
       cursor: pointer; }
+    form .form-input-addon-wrapper .form-input-addon[data-regenerate] {
+      cursor: pointer; }
   form .form-input-addon-wrapper input {
     height: 35px;
     display: table-cell; }
+    form .form-input-addon-wrapper input[name="data[folder]"] {
+      transition: background-color .5s ease; }
   form .form-input-addon-wrapper .form-input-prepend {
     border-radius: 4px 0 0 4px;
     border-right-width: 0 !important; }
@@ -3780,6 +3784,9 @@ html.remodal-is-locked {
 .admin-pages .form-tabs:first-child {
   margin-top: -1rem; }
 
+.admin-pages .form-tabs.side-tabs .tabs-nav {
+  margin-right: 0 !important; }
+
 .admin-pages .form-tabs .tabs-nav {
   margin-right: 180px; }
   @media only all and (max-width: 47.938em) {

themes/grav/scss/preset.scss

@@ -9,6 +9,9 @@
 $logo-bg:                       #323640 !default;
 $logo-link:                     #FFFFFF !default;
 
+// Utilities
+$highlight:                     #ffffd7 !default;
+
 // Nav
 $nav-bg:                        #3D424E !default;
 $nav-text:                      #B7B9BD !default;
@@ -779,6 +782,10 @@ form {
                 }
             }
         }
+
+        input[name="data[folder]"].highlight {
+            background-color: $highlight;
+        }
     }
 
 

themes/grav/scss/template/_forms.scss

@@ -97,10 +97,19 @@ form {
             &.copy-to-clipboard {
                 cursor: pointer;
             }
+
+            &[data-regenerate] {
+                cursor: pointer;
+            }
         }
+
         input {
             height: 35px;
             display: table-cell;
+
+            &[name="data[folder]"] {
+                transition: background-color .5s ease;
+            }
         }
         .form-input-prepend {
             border-radius: 4px 0 0 4px;

themes/grav/templates/forms/fields/folder-slug/folder-slug.html.twig

@@ -0,0 +1,8 @@
+{% extends "forms/fields/text/text.html.twig" %}
+{% set field = field|merge({'wrapper_classes': 'form-input-addon-wrapper'}) %}
+
+{% block append %}
+    <div class="form-input-addon form-input-append hint--top" data-hint="{{ 'PLUGIN_ADMIN.AUTOREGENERATE_FOLDER_SLUG'|tu }}" data-regenerate='[name="{{ (scope ~ field.name)|fieldName }}"]'>
+        <i class="fa fa-refresh"></i>
+    </div>
+{% endblock %}