Skip to content

Commit

Permalink
Refactor LifecycleEditor to make it work with htmx
Browse files Browse the repository at this point in the history
Htmx imports external javascript sources introduced in htmx responses, but
the run order is not like normal web pages, and thus previously we got an
error:

    Uncaught TypeError: RT.NewLifecycleEditor is not a constructor

Besides, because of js class declaration, if lifecycleui-model.js is
imported multiple times, we would get:

    Identifier 'LifecycleModel' has already been declared

This commit makes the following changes to make it work with htmx:

* Merge LifecyleModel into the anonymous js class saved in RT.NewLifecycleEditor

Via js class expression instead of a standard class declaration, we don't
need to worry about the code being imported multiple times.

* Move editor initialization code from inline to util.js for consistency

* Initialize only when editor is available
  • Loading branch information
sunnavy committed Dec 24, 2024
1 parent 27442d0 commit b7f939c
Show file tree
Hide file tree
Showing 6 changed files with 833 additions and 840 deletions.
3 changes: 0 additions & 3 deletions lib/RT/Interface/Web/MenuBuilder.pm
Original file line number Diff line number Diff line change
Expand Up @@ -1822,9 +1822,6 @@ sub _BuildAdminPageMenu {
$page->child(
basics => title => loc('Modify'),
path => "/Admin/Lifecycles/Modify.html?Type=" . $Type_uri . ";Name=" . $Name_uri,
attributes => {
'hx-boost' => 'false',
},
);
}
$page->child( actions => title => loc('Actions'), path => "/Admin/Lifecycles/Actions.html?Type=" . $Type_uri . ";Name=" . $Name_uri );
Expand Down
1 change: 0 additions & 1 deletion share/html/Admin/Lifecycles/Modify.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@
</div>

<script type="text/javascript" src="<%RT->Config->Get('WebPath')%>/static/js/d3.min.js"></script>
<script type="text/javascript" src="<%RT->Config->Get('WebPath')%>/static/js/lifecycleui-model.js"></script>
<script type="text/javascript" src="<%RT->Config->Get('WebPath')%>/static/js/lifecycleui-editor.js"></script>

<form action="<%RT->Config->Get('WebPath')%>/Admin/Lifecycles/Modify.html" name="ModifyLifecycle" method="post" enctype="multipart/form-data" class="mx-auto max-width-xl">
Expand Down
7 changes: 1 addition & 6 deletions share/html/Elements/Lifecycle/Graph
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
%# those contributions and any derivatives thereof.
%#
%# END BPS TAGGED BLOCK }}}
<div class="lifecycle-ui" id="lifecycle-<% $id %>">
<div class="lifecycle-ui" id="lifecycle-<% $id %>" data-config="<% $Config %>" data-maps="<% $Maps %>" data-layout="<% $Layout || '' %>" >
<div id="lifeycycle-ui-edit-node" class="lifeycycle-ui-edit-node collapse card card-body">
<input type="hidden" name="id" />
<div class="alert alert-warning invalid-name hidden"><&|/l&>Invalid name</&></div>
Expand Down Expand Up @@ -74,11 +74,6 @@
</div>
</div>

<script type="text/javascript">
jQuery(function () {
new RT.NewLifecycleEditor( document.getElementById('lifecycle-<% $id %>'), <% $Config |n %>, <% $Maps |n %> <% $Layout ? ", $Layout" : () |n %> );
});
</script>
<div class="row">
<div class="col-auto">
<span class="current-value form-control">
Expand Down
Loading

0 comments on commit b7f939c

Please sign in to comment.