Replace Tom Select with ITFlow's own select picker: native select stays the source of truth, search, checklists for multi selects, add-your-own for tag fields, phone sheet, and client/agent/contact avatars, tag and category colours, priority dots and asset icons in the options

This commit is contained in:
johnnyq
2026-10-13 12:41:29 -04:00
parent cc9f34e01a
commit 69484a8a2e
156 changed files with 2256 additions and 1182 deletions

View File

@@ -44,20 +44,19 @@
<!-- REQUIRED SCRIPTS -->
<?php /* Tom Select goes FIRST, ahead of Bootstrap itself. Order is load-bearing:
until js/tom_select.js runs, the browser is showing the raw <select>
controls it painted while parsing the body, so every byte in front of
it is time spent looking at the wrong widget. Nothing here is needed to
turn a <select> into a Tom Select, so nothing goes in front of it.
includes/header.php preloads both files. See js/tom_select.js.
<?php /* The select picker goes FIRST, ahead of Bootstrap itself. Order is
load-bearing: until js/itflow_select.js runs, the browser is showing
the raw <select> controls it painted while parsing the body, so every
byte in front of it is time spent looking at the wrong widget. It
needs nothing else on the page, so nothing goes in front of it.
includes/header.php preloads it.
Bootstrap moving down is safe: it has always loaded in the footer, so
no markup above this point could ever have used the `bootstrap` global
at parse time. Every call site is inside an event handler or waits for
DOMContentLoaded - includes/inc_alert_feedback.php says so in its own
comment - and all of those still run well after this block. */ ?>
<script src="/libs/tom-select/js/tom-select.complete.min.js"></script>
<script src="/js/tom_select.js"></script>
<script src="/js/itflow_select.js"></script>
<!-- Bootstrap 5 -->
<script src="/libs/bootstrap/js/bootstrap.bundle.min.js"></script>

View File

@@ -40,22 +40,19 @@ header("X-Frame-Options: DENY");
<link rel="icon" type="image/x-icon" href="/uploads/favicon.ico">
<?php } ?>
<?php /* The Tom Select pair is the first thing includes/footer.php runs,
<?php /* The select picker is the first thing includes/footer.php runs,
because until it does the browser is showing raw <select>
controls. Preloading here starts both fetches during head parse,
in parallel with the stylesheets, so the bytes are already warm
when the parser reaches the tag instead of being requested only
at that point. Hints only - the <script> tags in footer.php are
what actually load them. */ ?>
<link rel="preload" as="script" href="/libs/tom-select/js/tom-select.complete.min.js">
<link rel="preload" as="script" href="/js/tom_select.js">
controls. Preloading here starts the fetch during head parse, in
parallel with the stylesheets, so the bytes are already warm when
the parser reaches the tag. A hint only - the <script> tag in
footer.php is what actually loads it. */ ?>
<link rel="preload" as="script" href="/js/itflow_select.js">
<!-- Font Awesome -->
<link rel="stylesheet" href="/libs/fontawesome-free/css/all.min.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="/libs/flatpickr/css/flatpickr.min.css">
<link rel="stylesheet" href="/libs/tom-select/css/tom-select.bootstrap5.min.css">
<link rel="stylesheet" href="/libs/sweetalert2/css/sweetalert2.min.css">
<link rel="stylesheet" href="/libs/DataTables/datatables.min.css">
<link rel="stylesheet" href="/libs/intl-tel-input/css/intlTelInput.min.css">

View File

@@ -1,6 +1,6 @@
<script src="/js/http.js"></script>
<script src="/js/autocomplete.js"></script>
<script src="/js/tom_select.js"></script>
<script src="/js/itflow_select.js"></script>
<script src="/js/app.js"></script>
<?php