System: replaced the legacy Thickbox library with an AJAX-based modal…

… window

CHANGELOG.txt

@@ -60,6 +60,9 @@ v28.0.00
         Reports: fixed Send Report option to enable sending to students without needing parent details
         Timetable: fixed permission checking before displaying user status info in View Timetables list
         System Admin: fixed the sanitization rules for application form fields to allow HTML
+
+    Deprecations
+        System: replaced the legacy Thickbox library with an AJAX-based modal window
 
 v27.0.01
 --------

index.php

@@ -301,9 +301,6 @@
             'dateFormat' => str_replace('yyyy', 'yy', $session->get('i18n')['dateFormat']),
             'firstDay' => $session->get('firstDayOfTheWeek') == 'Monday'? 1 : ($session->get('firstDayOfTheWeek') == 'Saturday' ? 6 : 0),
         ],
-        'thickbox' => [
-            'pathToImage' => $session->get('absoluteURL').'/lib/thickbox/loadingAnimation.gif',
-        ],
         'tinymce' => [
             'valid_elements' => $settingGateway->getSettingByScope('System', 'allowableHTML'),
         ]
@@ -344,11 +341,9 @@
 }
 
 // Set page scripts: foot - misc
-$thickboxInline = 'var tb_pathToImage="'.$session->get('absoluteURL').'/lib/thickbox/loadingAnimation.gif";';
-$page->scripts->add('thickboxi', $thickboxInline, ['type' => 'inline']);
 $page->scripts->addMultiple([
-    'thickbox' => 'lib/thickbox/thickbox-compressed.js',
     'tinymce'  => 'lib/tinymce/tinymce.min.js',
+    'alpineFocus'   => 'lib/htmx/alpine.focus.min.js',
     'alpine'   => 'lib/htmx/alpine.min.js',
 ], ['context' => 'foot', 'type' => 'defer']);
 
@@ -369,7 +364,6 @@
 $page->stylesheets->addMultiple([
     'jquery-ui'    => 'lib/jquery-ui/css/blitzer/jquery-ui.css',
     'jquery-time'  => 'lib/jquery-timepicker/jquery.timepicker.css',
-    'thickbox'     => 'lib/thickbox/thickbox.css',
 ], ['weight' => -1]);
 
 // Add right-to-left stylesheet

resources/assets/js/setup.js

@@ -18,6 +18,20 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+// Initialize all legacy Thickbox links as HTMX AJAX calls
+Array.from(document.getElementsByClassName('thickbox')).forEach((element) => {
+    element.setAttribute('hx-boost', 'true');
+    element.setAttribute('hx-target', '#modalContent');
+    element.setAttribute('hx-push-url', 'false');
+    element.setAttribute('x-on:htmx:after-on-load', 'modalOpen = true');
+    element.classList.remove('thickbox');
+
+    if (element.getAttribute('href').includes('_delete')) {
+        element.setAttribute('x-on:click', "modalType = 'delete'");
+    }
+});
+
+
 $(document).ready(function(){
 
     $(document).trigger('gibbon-setup');

resources/templates/foot.twig.html

@@ -23,3 +23,44 @@
         <script type="text/javascript" src="{{ absoluteURL }}/{{ asset.src }}?v={{ assetVersion }}.{{ cacheString }}"></script>
     {% endif %}
 {% endfor %}
+
+<div id="modal" x-show="modalOpen" x-trap.inert.noscroll.noreturn="modalOpen" @keydown.escape.window="modalOpen = false" class="fixed inset-0 z-50 overflow-y-auto" style="display:none;" aria-labelledby="modal-title" role="dialog" aria-modal="true" >
+
+    <div class="flex items-center content-center justify-center min-h-screen px-4 text-center sm:block sm:p-0 overflow-hidden">
+
+        <div x-cloak @click="modalOpen = false" x-show="modalOpen" 
+            x-transition:enter="transition ease-out duration-300 transform"
+            x-transition:enter-start="opacity-0" 
+            x-transition:enter-end="opacity-100"
+            x-transition:leave="transition ease-in duration-200 transform"
+            x-transition:leave-start="opacity-100" 
+            x-transition:leave-end="opacity-0"
+            class="fixed inset-0 transition-opacity bg-black bg-opacity-50" style="opacity: 0.5"
+            aria-hidden="true"
+        ></div>
+
+        <div x-cloak x-show="modalOpen" 
+            x-transition:enter="transition ease-out duration-300 transform"
+            x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
+            x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+            x-transition:leave="transition ease-in duration-200 transform"
+            x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
+            x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            class="relative inline-block w-full overflow-y-auto p-6 my-20 overflow-x-hidden text-left transition-all transform bg-white rounded-lg shadow-xl "
+            :class="modalType == 'delete' ? 'max-w-2xl' : 'max-w-6xl'"
+            style="min-height: 20vh; max-height: 80vh"
+        >
+            <div class="flex w-full -my-2 mx-2 justify-end">
+                <button @click="modalOpen = false" class="bg-white text-gray-600 focus:outline-none hover:text-gray-700">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                </button>
+            </div>
+
+            <div id="modalContent">
+
+            </div>
+        </div>
+    </div>
+</div>