[Bps-public-commit] rt-extension-formtools branch dynamic-forms-from-config updated. 0.53-52-ga5121cf
BPS Git Server
git at git.bestpractical.com
Fri Oct 13 20:37:11 UTC 2023
This is an automated email from the git hooks/post-receive script. It was
generated because a ref change was pushed to the repository containing
the project "rt-extension-formtools".
The branch, dynamic-forms-from-config has been updated
via a5121cfe2572bd4343034a07b9c42ae235368fee (commit)
from 841da6cc08527970a8b84ce88a2858deef7a0636 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
- Log -----------------------------------------------------------------
commit a5121cfe2572bd4343034a07b9c42ae235368fee
Author: sunnavy <sunnavy at bestpractical.com>
Date: Fri Oct 13 16:34:35 2023 -0400
Move modal out of draggable divs to make mouse clicks work in modal
On some browsers like Firefox, previously you couldn't click in a
textarea to move cursor because the modal was in a draggable parent.
diff --git a/html/Admin/FormTools/Modify.html b/html/Admin/FormTools/Modify.html
index daf4440..e53d21e 100644
--- a/html/Admin/FormTools/Modify.html
+++ b/html/Admin/FormTools/Modify.html
@@ -18,41 +18,41 @@
<span class="fas fa-pencil-alt" alt="<% loc('Edit') %>" data-toggle="tooltip" data-placement="top" data-original-title="<% loc('Edit') %>"></span>
</a>
% }
- <a href="#" class="remove" onclick="jQuery(this).find('[data-toggle=tooltip]').tooltip('hide'); this.closest('.formtools-element').remove(); return false;">
+ <a href="#" class="remove" onclick="return formTools.deleteElement(event);">
<span class="far fa-times-circle" alt="<% loc('Remove') %>" data-toggle="tooltip" data-placement="top" data-original-title="<% loc('Remove') %>"></span>
</a>
</p>
-% if ( $item ne 'hr' ) {
- <div class="modal fade formtools-element-modal" id="formtools-element-<% $item %>-modal" tabindex="-1" role="dialog">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <form class="formtools-element-form">
- <div class="modal-header">
- <h5 class="modal-title"><% loc('Modify Element') %></h5>
- <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </a>
- </div>
- <div class="modal-body">
- <&| /Elements/LabeledValue, Label => loc("Content") &>
+ </div>
+% if ( $item ne 'hr' ) {
+ <div class="modal fade formtools-element-modal" id="formtools-element-<% $item %>-modal" tabindex="-1" role="dialog">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <form class="formtools-element-form">
+ <div class="modal-header">
+ <h5 class="modal-title"><% loc('Modify Element') %></h5>
+ <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </a>
+ </div>
+ <div class="modal-body">
+ <&| /Elements/LabeledValue, Label => loc("Content") &>
% if ( $item =~ /^h\d/ ) {
- <input name="content" class="form-control" data-wrapper="<% $item %>" />
+ <input name="content" class="form-control" data-wrapper="<% $item %>" />
% } elsif ( $item eq 'p' ) {
- <textarea name="content" class="form-control" data-wrapper="<% $item %>"></textarea>
+ <textarea name="content" class="form-control" data-wrapper="<% $item %>"></textarea>
% } elsif ( $item eq 'html' ) {
- <textarea name="content" class="form-control"></textarea>
+ <textarea name="content" class="form-control"></textarea>
% }
- </&>
- </div>
- <div class="modal-footer">
- <button type="submit" class="btn btn-primary button form-control"><% loc('Save') %></button>
- </div>
- </form>
- </div>
+ </&>
+ </div>
+ <div class="modal-footer">
+ <button type="submit" class="btn btn-primary button form-control"><% loc('Save') %></button>
+ </div>
+ </form>
</div>
</div>
-% }
</div>
+% }
% }
<hr />
% foreach my $item ( @core_components ) {
@@ -68,32 +68,32 @@
<span class="far fa-times-circle" alt="<% loc('Remove') %>" data-toggle="tooltip" data-placement="top" data-original-title="<% loc('Remove') %>"></span>
</a>
</p>
- <div class="modal fade formtools-element-modal" id="formtools-element-<% $item %>-modal" tabindex="-1" role="dialog">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <form class="formtools-element-form">
- <div class="modal-header">
- <h5 class="modal-title"><% loc('Modify Element') %></h5>
- <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </a>
- </div>
- <div class="modal-body">
- <&| /Elements/LabeledValue, Label => loc('Label') &>
- <input name="label" type="text" class="form-control" placeholder="<% $item %>" value="" />
- </&>
- <&| /Elements/LabeledValue, Label => loc('Default Value') &>
- <input name="default" type="text" class="form-control" placeholder="<% $default_values{$item} %>" value="" />
- </&>
- <&| /Elements/LabeledValue, Label => loc('Tooltip') &>
- <input name="tooltip" type="text" class="form-control" value="" />
- </&>
- </div>
- <div class="modal-footer">
- <button type="submit" class="btn btn-primary button form-control"><% loc('Save') %></button>
- </div>
- </form>
- </div>
+ </div>
+ <div class="modal fade formtools-element-modal" id="formtools-element-<% $item %>-modal" tabindex="-1" role="dialog">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <form class="formtools-element-form">
+ <div class="modal-header">
+ <h5 class="modal-title"><% loc('Modify Element') %></h5>
+ <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </a>
+ </div>
+ <div class="modal-body">
+ <&| /Elements/LabeledValue, Label => loc('Label') &>
+ <input name="label" type="text" class="form-control" placeholder="<% $item %>" value="" />
+ </&>
+ <&| /Elements/LabeledValue, Label => loc('Default Value') &>
+ <input name="default" type="text" class="form-control" placeholder="<% $default_values{$item} %>" value="" />
+ </&>
+ <&| /Elements/LabeledValue, Label => loc('Tooltip') &>
+ <input name="tooltip" type="text" class="form-control" value="" />
+ </&>
+ </div>
+ <div class="modal-footer">
+ <button type="submit" class="btn btn-primary button form-control"><% loc('Save') %></button>
+ </div>
+ </form>
</div>
</div>
</div>
@@ -112,40 +112,40 @@
<span class="far fa-times-circle" alt="<% loc('Remove') %>" data-toggle="tooltip" data-placement="top" data-original-title="<% loc('Remove') %>"></span>
</a>
</p>
- <div class="modal fade formtools-element-modal" id="formtools-element-<% $item %>-modal" tabindex="-1" role="dialog">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <form class="formtools-element-form">
- <div class="modal-header">
- <h5 class="modal-title"><% loc('Modify Element') %></h5>
- <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </a>
- </div>
- <div class="modal-body">
- <&| /Elements/LabeledValue, Label => loc('Label') &>
- <input name="label" type="text" class="form-control" placeholder="<% $item %>" value="" />
- </&>
- <&| /Elements/LabeledValue, Label => loc('Default Value') &>
- <input name="default" type="text" class="form-control" placeholder="<% $default_values{$item} %>" value="" />
- </&>
- <&| /Elements/LabeledValue, Label => loc('Tooltip') &>
- <input name="tooltip" type="text" class="form-control" placeholder="<% $tooltips{$item} // '' %>" value="" />
- </&>
- <&| /Elements/LabeledValue, Label => '' &>
- <div class="custom-control custom-checkbox">
- <input class="custom-control-input" id="<% CSSClass($item) %>-validation" type="checkbox" name="show_validation" value="1" checked="checked" />
- <label class="custom-control-label" for="<% CSSClass($item) %>-validation">
- <&|/l&>Show validation</&>
- </label>
- </div>
- </&>
- </div>
- <div class="modal-footer">
- <button type="submit" class="btn btn-primary button form-control"><% loc('Save') %></button>
- </div>
- </form>
- </div>
+ </div>
+ <div class="modal fade formtools-element-modal" id="formtools-element-<% $item %>-modal" tabindex="-1" role="dialog">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <form class="formtools-element-form">
+ <div class="modal-header">
+ <h5 class="modal-title"><% loc('Modify Element') %></h5>
+ <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </a>
+ </div>
+ <div class="modal-body">
+ <&| /Elements/LabeledValue, Label => loc('Label') &>
+ <input name="label" type="text" class="form-control" placeholder="<% $item %>" value="" />
+ </&>
+ <&| /Elements/LabeledValue, Label => loc('Default Value') &>
+ <input name="default" type="text" class="form-control" placeholder="<% $default_values{$item} %>" value="" />
+ </&>
+ <&| /Elements/LabeledValue, Label => loc('Tooltip') &>
+ <input name="tooltip" type="text" class="form-control" placeholder="<% $tooltips{$item} // '' %>" value="" />
+ </&>
+ <&| /Elements/LabeledValue, Label => '' &>
+ <div class="custom-control custom-checkbox">
+ <input class="custom-control-input" id="<% CSSClass($item) %>-validation" type="checkbox" name="show_validation" value="1" checked="checked" />
+ <label class="custom-control-label" for="<% CSSClass($item) %>-validation">
+ <&|/l&>Show validation</&>
+ </label>
+ </div>
+ </&>
+ </div>
+ <div class="modal-footer">
+ <button type="submit" class="btn btn-primary button form-control"><% loc('Save') %></button>
+ </div>
+ </form>
</div>
</div>
</div>
@@ -167,35 +167,34 @@
<span class="far fa-times-circle" alt="<% loc('Remove') %>" data-toggle="tooltip" data-placement="top" data-original-title="<% loc('Remove') %>"></span>
</a>
</p>
-
-% if ( $item eq 'Hidden' ) {
- <div class="modal fade formtools-element-modal" id="formtools-element-<% $item %>-modal" tabindex="-1" role="dialog">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <form class="formtools-element-form">
- <div class="modal-header">
- <h5 class="modal-title"><% loc('Modify Element') %></h5>
- <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </a>
- </div>
- <div class="modal-body">
- <&| /Elements/LabeledValue, Label => loc('Name') &>
- <input name="name" type="text" class="form-control" value="" />
- </&>
- <&| /Elements/LabeledValue, Label => loc('Value') &>
- <input name="value" type="text" class="form-control" value="" />
- </&>
- </div>
- <div class="modal-footer">
- <button type="submit" class="btn btn-primary button form-control"><% loc('Save') %></button>
- </div>
- </form>
- </div>
+ </div>
+% if ( $item eq 'Hidden' ) {
+ <div class="modal fade formtools-element-modal" id="formtools-element-<% $item %>-modal" tabindex="-1" role="dialog">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <form class="formtools-element-form">
+ <div class="modal-header">
+ <h5 class="modal-title"><% loc('Modify Element') %></h5>
+ <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </a>
+ </div>
+ <div class="modal-body">
+ <&| /Elements/LabeledValue, Label => loc('Name') &>
+ <input name="name" type="text" class="form-control" value="" />
+ </&>
+ <&| /Elements/LabeledValue, Label => loc('Value') &>
+ <input name="value" type="text" class="form-control" value="" />
+ </&>
+ </div>
+ <div class="modal-footer">
+ <button type="submit" class="btn btn-primary button form-control"><% loc('Save') %></button>
+ </div>
+ </form>
</div>
</div>
-% }
</div>
+% }
% }
</div>
</&>
@@ -306,72 +305,75 @@
<span class="far fa-times-circle" alt="<% loc('Remove') %>" data-toggle="tooltip" data-placement="top" data-original-title="<% loc('Remove') %>"></span>
</a>
</p>
- <div class="modal fade formtools-element-modal" id="formtools-element-<% $form_page_id{$page_name} %>-<% $i %>-modal" tabindex="-1" role="dialog">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <form class="formtools-element-form">
- <div class="modal-header">
- <h5 class="modal-title"><% loc('Modify Element') %></h5>
- <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </a>
- </div>
- <div class="modal-body">
-% if ( $item->{type} eq 'raw_html' ) {
- <&| /Elements/LabeledValue, Label => loc("Content") &>
-% if ( ($item->{wrapper} // '') =~ /^h\d/i ) {
- <input name="content" class="form-control" data-wrapper="<% $item->{wrapper} %>" value="<% $item->{content} %>"/>
-% } elsif ( lc ($item->{wrapper} // '') eq 'p' ) {
- <textarea name="content" class="form-control" data-wrapper="<% $item->{wrapper} %>"><% $item->{content} %></textarea>
-% } elsif ( $item eq 'html' ) {
- <textarea name="content" class="form-control"><% $item->{html} %></textarea>
-% }
- </&>
-% } elsif ( $item->{type} eq 'component' && $item->{comp_name} eq 'Field' ) {
- <&| /Elements/LabeledValue, Label => loc('Label') &>
- <input name="label" type="text" class="form-control" placeholder="<% $item->{arguments}{name} %>" value="<% $item->{arguments}{label} // '' %>" />
- </&>
- <&| /Elements/LabeledValue, Label => loc('Default Value') &>
- <input name="default" type="text" class="form-control" placeholder="<% $default_values{$item->{arguments}{name}} %>" value="<% $item->{arguments}{default} // '' %>" />
- </&>
-
- <&| /Elements/LabeledValue, Label => loc('Tooltip') &>
- <input name="tooltip" type="text" class="form-control" placeholder="<% $tooltips{$item->{arguments}{name}} // '' %>" value="<% $item->{arguments}{tooltip} // '' %>" />
- </&>
-% if ( !RT::Extension::FormTools::is_core_field($item->{arguments}{name}) ) {
- <&| /Elements/LabeledValue, Label => '' &>
- <div class="custom-control custom-checkbox">
- <input class="custom-control-input" id="formtools-element-<% $form_page_id{$page_name} %>-<% $i %>-validation" type="checkbox" name="show_validation" value="1" <% $item->{arguments}{show_validation} ? q{checked="checked"} : '' |n %> />
- <label class="custom-control-label" for="formtools-element-<% $form_page_id{$page_name} %>-<% $i %>-validation">
- <&|/l&>Show validation</&>
- </label>
- </div>
- </&>
-% }
-% } elsif ( $item->{type} eq 'hidden' ) {
- <&| /Elements/LabeledValue, Label => loc('Name') &>
- <input name="name" type="text" class="form-control" value="<% $item->{'input-name'} // '' %>" />
- </&>
- <&| /Elements/LabeledValue, Label => loc('Value') &>
- <input name="value" type="text" class="form-control" value="<% $item->{'input-value'} // '' %>" />
- </&>
+ </div>
+% $i++;
+% }
+ <p class="formtools-element-placeholder m-1 p-2 border rounded"><% loc('Put it here') %></p>
+ </div>
+ <div class="modal-wrapper">
+% $i = 0;
+% for my $item ( grep { $_->{type} ne 'hidden' || $_->{'input-name'} ne 'create_ticket' } @{$form->{'formtools-pages'}{$page_name}{content} || []} ) {
+ <div class="modal fade formtools-element-modal" id="formtools-element-<% $form_page_id{$page_name} %>-<% $i %>-modal" tabindex="-1" role="dialog">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <form class="formtools-element-form">
+ <div class="modal-header">
+ <h5 class="modal-title"><% loc('Modify Element') %></h5>
+ <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </a>
+ </div>
+ <div class="modal-body">
+% if ( $item->{type} eq 'raw_html' ) {
+ <&| /Elements/LabeledValue, Label => loc("Content") &>
+% if ( ($item->{wrapper} // '') =~ /^h\d/i ) {
+ <input name="content" class="form-control" data-wrapper="<% $item->{wrapper} %>" value="<% $item->{content} %>"/>
+% } elsif ( lc ($item->{wrapper} // '') eq 'p' ) {
+ <textarea name="content" class="form-control" data-wrapper="<% $item->{wrapper} %>"><% $item->{content} %></textarea>
+% } elsif ( $item eq 'html' ) {
+ <textarea name="content" class="form-control"><% $item->{html} %></textarea>
% }
- </div>
- <div class="modal-footer">
-
- <button type="submit" class="btn btn-primary button form-control"><% loc('Save') %></button>
- </div>
- </form>
- </div>
+ </&>
+% } elsif ( $item->{type} eq 'component' && $item->{comp_name} eq 'Field' ) {
+ <&| /Elements/LabeledValue, Label => loc('Label') &>
+ <input name="label" type="text" class="form-control" placeholder="<% $item->{arguments}{name} %>" value="<% $item->{arguments}{label} // '' %>" />
+ </&>
+ <&| /Elements/LabeledValue, Label => loc('Default Value') &>
+ <input name="default" type="text" class="form-control" placeholder="<% $default_values{$item->{arguments}{name}} %>" value="<% $item->{arguments}{default} // '' %>" />
+ </&>
+
+ <&| /Elements/LabeledValue, Label => loc('Tooltip') &>
+ <input name="tooltip" type="text" class="form-control" placeholder="<% $tooltips{$item->{arguments}{name}} // '' %>" value="<% $item->{arguments}{tooltip} // '' %>" />
+ </&>
+% if ( !RT::Extension::FormTools::is_core_field($item->{arguments}{name}) ) {
+ <&| /Elements/LabeledValue, Label => '' &>
+ <div class="custom-control custom-checkbox">
+ <input class="custom-control-input" id="formtools-element-<% $form_page_id{$page_name} %>-<% $i %>-validation" type="checkbox" name="show_validation" value="1" <% $item->{arguments}{show_validation} ? q{checked="checked"} : '' |n %> />
+ <label class="custom-control-label" for="formtools-element-<% $form_page_id{$page_name} %>-<% $i %>-validation">
+ <&|/l&>Show validation</&>
+ </label>
+ </div>
+ </&>
+% }
+% } elsif ( $item->{type} eq 'hidden' ) {
+ <&| /Elements/LabeledValue, Label => loc('Name') &>
+ <input name="name" type="text" class="form-control" value="<% $item->{'input-name'} // '' %>" />
+ </&>
+ <&| /Elements/LabeledValue, Label => loc('Value') &>
+ <input name="value" type="text" class="form-control" value="<% $item->{'input-value'} // '' %>" />
+ </&>
+% }
+ </div>
+ <div class="modal-footer">
+ <button type="submit" class="btn btn-primary button form-control"><% loc('Save') %></button>
+ </div>
+ </form>
</div>
</div>
</div>
% $i++;
% }
- <p class="formtools-element-placeholder m-1 p-2 border rounded"><% loc('Put it here') %></p>
</div>
-
-
</&>
</div>
% }
diff --git a/static/js/rt-extension-formtools.js b/static/js/rt-extension-formtools.js
index 3b0fa87..a177839 100644
--- a/static/js/rt-extension-formtools.js
+++ b/static/js/rt-extension-formtools.js
@@ -53,10 +53,6 @@ formTools = {
const old_id = source_copy.id;
source_copy.id = 'formtools-element-' + area.dataset.pageId + '-' + Date.now();
- jQuery(source_copy).find('#' + old_id + '-modal').attr('id', source_copy.id + '-modal' );
- jQuery(source_copy).find('a.edit').attr('data-target', '#' + source_copy.id + '-modal' );
- jQuery(source_copy).find('form.formtools-element-form').on('submit', formTools.elementSubmit);
- jQuery(source_copy).find('.formtools-element-modal').modal('show');
jQuery(source_copy).attr('ondragenter', 'formTools.dragenter(event);');
if ( sibling ) {
area.insertBefore(source_copy, sibling);
@@ -64,6 +60,14 @@ formTools = {
else {
area.insertBefore(source_copy, area.children[area.children.length-1]);
}
+
+ const modal_copy = jQuery('#' + old_id + '-modal').clone(true);
+ jQuery('div.modal-wrapper:visible').append(modal_copy);
+ modal_copy.attr('id', source_copy.id + '-modal' );
+ modal_copy.find('a.edit').attr('data-target', '#' + source_copy.id + '-modal' );
+ modal_copy.find('form.formtools-element-form').on('submit', formTools.elementSubmit);
+ modal_copy.modal('show');
+ modal_copy.attr('ondragenter', 'formTools.dragenter(event);');
}
},
@@ -76,7 +80,8 @@ formTools = {
elementSubmit: function(e) {
e.preventDefault();
const form = jQuery(this);
- const element = form.closest('.formtools-element');
+ const modal = form.closest('.formtools-element-modal');
+ const element = jQuery('#' + modal.attr('id').replace(/-modal$/, ''));
const value = element.data('value');
if ( value.type === 'raw_html' ) {
@@ -164,6 +169,17 @@ formTools = {
form.find('input[name=Content]').val(JSON.stringify(content));
},
+ deleteElement: function(event) {
+ jQuery(event.target).find('[data-toggle=tooltip]').tooltip('hide');
+ const element = event.target.closest('.formtools-element');
+ const modal = document.getElementById(element.id + '-modal');
+ if ( modal ) {
+ modal.remove();
+ }
+ element.remove();
+ return false;
+ },
+
deletePage: function() {
jQuery('.formtools-element-modal.show').modal('hide');
const tab = jQuery(this).closest('.tab-pane');
-----------------------------------------------------------------------
Summary of changes:
html/Admin/FormTools/Modify.html | 342 ++++++++++++++++++------------------
static/js/rt-extension-formtools.js | 26 ++-
2 files changed, 193 insertions(+), 175 deletions(-)
hooks/post-receive
--
rt-extension-formtools
More information about the Bps-public-commit
mailing list