[Bps-public-commit] rt-extension-formtools branch dynamic-forms-from-config updated. 0.53-15-gb962fdd
BPS Git Server
git at git.bestpractical.com
Wed Sep 20 20:53:53 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 b962fdd43039d9b29d2eb3692f48d8640bdd7843 (commit)
from 422f6a6bcb2754f64f38c193e8a6c8731f9b1a74 (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 b962fdd43039d9b29d2eb3692f48d8640bdd7843
Author: Jim Brandt <jbrandt at bestpractical.com>
Date: Wed Sep 20 16:53:46 2023 -0400
Add basic drag and drop
diff --git a/META.yml b/META.yml
index 470eb1d..9f86295 100644
--- a/META.yml
+++ b/META.yml
@@ -19,6 +19,7 @@ no_index:
- etc
- html
- inc
+ - static
requires:
perl: 5.10.1
resources:
diff --git a/html/Admin/FormTools/Modify.html b/html/Admin/FormTools/Modify.html
index 146d4a2..95e40dd 100644
--- a/html/Admin/FormTools/Modify.html
+++ b/html/Admin/FormTools/Modify.html
@@ -6,23 +6,18 @@
<div class="row">
<div class="formtools-component-menu boxcontainer col-md-3" id="formtools-component-wrapper">
<&| /Widgets/TitleBox, title => loc('FormTools Components') &>
- <div aria-label="FormTools HTML Components">
- <button type="button" class="btn btn-outline-primary btn-block">H1 Element</button>
- <button type="button" class="btn btn-outline-primary btn-block">H2 Element</button>
- <button type="button" class="btn btn-outline-primary btn-block">HR Element</button>
- </div>
+ <div class="d-block text-center">
+% foreach my $item ( @html_components ) {
+ <p id="formtools-element-<% $item %>" class="m-1 p-2 border border-primary rounded" draggable="true" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);"><% uc($item) %> Element</p>
+% }
<hr />
- <div aria-label="FormTools RT Core Components">
- <button type="button" class="btn btn-outline-primary btn-block">Requestors</button>
- <button type="button" class="btn btn-outline-primary btn-block">Owner</button>
- <button type="button" class="btn btn-outline-primary btn-block">Subject</button>
- <button type="button" class="btn btn-outline-primary btn-block">Content</button>
- </div>
+% foreach my $item ( @core_components ) {
+ <p id="formtools-element-<% $item %>" class="m-1 p-2 border border-primary rounded" draggable="true" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);"><% ucfirst($item) %></p>
+% }
<hr />
- <div aria-label="FormTools RT Custom Fields">
- <button type="button" class="btn btn-outline-primary btn-block">Custom Field 1</button>
- <button type="button" class="btn btn-outline-primary btn-block">Custom Field 2</button>
- <button type="button" class="btn btn-outline-primary btn-block">Custom Field 3</button>
+% foreach my $item ( @custom_fields ) {
+ <p id="formtools-element-<% $item %>" class="m-1 p-2 border border-primary rounded" draggable="true" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);"><% uc($item) %></p>
+% }
</div>
</&>
</div>
@@ -43,6 +38,9 @@
</li>
% }
</ul>
+ <p>Drag components from the left toolbar and drop them here</p>
+ <div id="formtools-content-form-1" class="formtools-content w-100 border border-primary rounded" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event);">
+ </div>
</&>
</div><!-- row -->
</div><!-- formtools-form-pages -->
@@ -73,6 +71,10 @@ $title = loc("Modify form [_1]", $form_attribute->Description);
my $nav_type = 'pill'; # 'tab' or 'pill'
+my @html_components = qw( h1 h2 h3 hr );
+my @core_components = qw( requestors owner subject content );
+my @custom_fields = qw( cf1 cf2 cf3 );
+
</%INIT>
<%ARGS>
$id => undef
diff --git a/lib/RT/Extension/FormTools.pm b/lib/RT/Extension/FormTools.pm
index 8ff77d5..c1dbd38 100644
--- a/lib/RT/Extension/FormTools.pm
+++ b/lib/RT/Extension/FormTools.pm
@@ -5,6 +5,9 @@ package RT::Extension::FormTools;
our $VERSION = '0.53';
+RT->AddStyleSheets('rt-extension-formtools.css');
+RT->AddJavaScript('rt-extension-formtools.js');
+
=head1 NAME
RT-Extension-FormTools - Help write multi-page ticket creation wizards
diff --git a/static/css/rt-extension-formtools.css b/static/css/rt-extension-formtools.css
new file mode 100644
index 0000000..ad60315
--- /dev/null
+++ b/static/css/rt-extension-formtools.css
@@ -0,0 +1,4 @@
+
+div .formtools-content {
+ min-height: 400px;
+}
diff --git a/static/js/rt-extension-formtools.js b/static/js/rt-extension-formtools.js
new file mode 100644
index 0000000..31c5d6e
--- /dev/null
+++ b/static/js/rt-extension-formtools.js
@@ -0,0 +1,69 @@
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ var dti = ev.dataTransfer.items;
+ if (dti === undefined || dti == null) {
+ console.log("Browser does not support DataTransferItem interface");
+ return;
+ }
+
+ // Add the id of the drag source element to the drag data payload so
+ // it is available when the drop event is fired
+ dti.add(ev.target.id, "text/plain");
+ // Tell the browser both copy and move are possible
+ ev.effectAllowed = "copy";
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ var dti = ev.dataTransfer.items;
+ if (dti === undefined || dti == null) {
+ console.log("Browser does not support DataTransferItem interface");
+ return;
+ }
+ // Change the target element's border to signify a drag over event
+ // has occurred
+ ev.currentTarget.style.background = "lightgray";
+ ev.preventDefault();
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var dti = ev.dataTransfer.items;
+ if (dti === undefined || dti == null) {
+ console.log("Browser does not support DataTransferItem interface");
+ return;
+ }
+ // Get the id of the drag source element (that was added to the drag data
+ // payload by the dragstart event handler). Even though only one drag item
+ // was explicitly added, the browser may include other items so need to search
+ // for the plain/text item.
+ for (var i=0; i < dti.length; i++) {
+ console.log("Drop: item[" + i + "].kind = " + dti[i].kind + " ; item[" + i + "].type = " + dti[i].type);
+ if ((dti[i].kind == 'string') && (dti[i].type.match('^text/plain'))) {
+ // This item is the target node
+ dti[i].getAsString(function (id){
+ // Copy the element
+ var nodeCopy = document.getElementById(id).cloneNode(true);
+ console.log("Copying " + nodeCopy);
+ nodeCopy.id = "newId";
+ ev.target.appendChild(nodeCopy);
+ });
+ }
+ }
+
+ // Clear background
+ ev.currentTarget.style.background = "none";
+}
+
+function dragend_handler(ev) {
+ console.log("dragEnd");
+ var dti = ev.dataTransfer.items;
+ if (dti === undefined || dti == null) {
+ console.log("Browser does not support DataTransferItem interface");
+ return;
+ }
+
+ // Remove all of the items from the list.
+ dti.clear();
+}
-----------------------------------------------------------------------
Summary of changes:
META.yml | 1 +
html/Admin/FormTools/Modify.html | 32 ++++++++--------
lib/RT/Extension/FormTools.pm | 3 ++
static/css/rt-extension-formtools.css | 4 ++
static/js/rt-extension-formtools.js | 69 +++++++++++++++++++++++++++++++++++
5 files changed, 94 insertions(+), 15 deletions(-)
create mode 100644 static/css/rt-extension-formtools.css
create mode 100644 static/js/rt-extension-formtools.js
hooks/post-receive
--
rt-extension-formtools
More information about the Bps-public-commit
mailing list