Skip to content

Commit

Permalink
Upgrading to Bootstrap 5 and removing dependency on JQuery.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sergiotarxz
sergiotarxz committed Feb 15, 2024
1 parent 0555008 commit fd8733e
Show file tree
Hide file tree
Showing 8 changed files with 59 additions and 46 deletions.
13 changes: 6 additions & 7 deletions lib/Mojolicious/resources/public/mojo/bootstrap/bootstrap.css
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions lib/Mojolicious/resources/public/mojo/bootstrap/bootstrap.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions lib/Mojolicious/resources/public/mojo/bootstrap/bootstrap.min.css.map
View file

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions lib/Mojolicious/resources/public/mojo/jquery/jquery.js
View file

This file was deleted.

11 changes: 10 additions & 1 deletion lib/Mojolicious/resources/public/mojo/mojo.css
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,25 @@
html {
height:100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
main {
overflow-wrap: break-word;
word-wrap: break-word;
}
.navbar {
--bs-navbar-padding-x: 1rem;
--bs-navbar-padding-y: .5rem;
}
:not(pre) > code {
background-color: #eef9ff;
border: solid #cce4ff 1px;
border-radius: .25rem;
color: #333;
font: 14px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;;
font: 14px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
padding: 0.4em;
}
h2 {
Expand Down
66 changes: 38 additions & 28 deletions lib/Mojolicious/resources/templates/mojo/debug.html.ep
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,19 @@
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
%= favicon
%= javascript '/mojo/jquery/jquery.js'
%= javascript '/mojo/highlight.js/highlight.min.js'
%= javascript '/mojo/highlight.js/mojolicious.min.js'
%= javascript '/mojo/popper/popper.js'
%= javascript '/mojo/bootstrap/bootstrap.js'
%= stylesheet '/mojo/bootstrap/bootstrap.css'
%= stylesheet '/mojo/highlight.js/highlight-mojo-dark.css'
%= stylesheet '/mojo/mojo.css'
<script>
'use strict';
hljs.initHighlightingOnLoad();
$(function () {
$('[data-toggle="tooltip"]').tooltip()
window.addEventListener('load', () => {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
});
</script>
<style>
Expand All @@ -45,14 +47,14 @@
srcset="<%= url_for_file '/mojo/logo-white-2x.png' %> 2x">
</picture>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav me-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Documentation
</a>
Expand All @@ -72,7 +74,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="communityDropdown" role="button" data-toggle="dropdown"
<a class="nav-link dropdown-toggle" href="#" id="communityDropdown" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Community
</a>
Expand All @@ -99,16 +101,20 @@
</nav>
</header>
<script>
'use strict';
function mojoDrawer(handle, drawer) {
$(handle).on('click', function () {
$(drawer).slideToggle('slow');
const text = $(handle + ' div.tap').text();
const handleEl = document.querySelector(handle);
if (handleEl === null) return;
handleEl.addEventListener('click', () => {
const drawerEl = document.querySelector(drawer);
let text = handleEl.innerText;
text = text == "tap for more" ? "tap for less" : "tap for more";
$(handle + ' div.tap').text(text);
const divTap = document.querySelector(handle + ' div.tap');
if (divTap !== null) divTap.innerText = text;
drawerEl.classList.toggle('d-none');
});
$(drawer).toggle();
}
$(function () {
window.addEventListener('load', () => {
mojoDrawer('#trace', '#frames');
mojoDrawer('#more', '#infos');
});
Expand Down Expand Up @@ -155,7 +161,7 @@
</table>
</div>
% if (defined $exception->line->[2]) {
<div id="insight" class="more">
<div id="insight">
<table class="wide">
% for my $line (@{$exception->lines_before}) {
%= $cv->($line->[0], $line->[2])
Expand All @@ -168,26 +174,30 @@
</div>
<div class="tap">tap for more</div>
<script>
'use strict';
let current = '#context';
function mojoShowcase() {
$('#showcase').on('click', function () {
$(this).unbind('click');
$(current).slideToggle('slow', function () {
current = current == '#context' ? '#insight' : '#context';
$(current).slideToggle('slow', function () {
mojoShowcase();
});
});
});
const showcase = document.querySelector('#showcase');
function onClickShowcase() {
showcase.removeEventListener('click', onClickShowcase);
let currentEl = document.querySelector(current);
currentEl.classList.toggle('d-none');
current = current == '#context' ? '#insight' : '#context';
currentEl = document.querySelector(current);
currentEl.classList.toggle('d-none');
mojoShowcase();
};
showcase.addEventListener('click', onClickShowcase);
}
mojoShowcase();
$('#insight').toggle();
const insightEl = document.querySelector('#insight');
insightEl.classList.toggle('d-none');
</script>
% }
</div>
<div id="trace" class="box no-padding more no-top-border border-radius-bottom">
% if (@{$exception->frames}) {
<div id="frames" class="more">
<div id="frames" class="d-none">
<table class="striped wide">
% for my $frame (@{$exception->frames}) {
<tr>
Expand Down Expand Up @@ -224,8 +234,8 @@
% $unparsed = "+$unparsed" if $depth;
% $pattern->match('/', $route->is_endpoint && !$route->partial);
% my $regex = (regexp_pattern $pattern->regex)[0];
<tr data-toggle="tooltip" data-placement="left" data-html="true"
title="<b>Regex:</b> <code><%= $regex %></code>">
<tr data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
data-bs-title="<b>Regex:</b> <code><%= $regex %></code>">
<td class="value">
<pre><%= ' ' x $depth %><%= $unparsed %></pre>
</td>
Expand Down Expand Up @@ -275,7 +285,7 @@
</table>
</div>
<div id="more" class="box no-padding more no-top-border border-radius-bottom">
<div id="infos">
<div id="infos" class="d-none">
<table class="striped fixed-table wide">
%= $kv->(Perl => "$^V ($^O)")
% my $version = $Mojolicious::VERSION;
Expand Down
2 changes: 0 additions & 2 deletions t/mojolicious/exception_lite_app.t
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,8 +336,6 @@ subtest 'Text exceptions' => sub {
};

subtest 'Bundled static files' => sub {
$t->get_ok('/mojo/jquery/jquery.js')->status_is(200)->content_type_is('application/javascript');

$t->get_ok('/mojo/highlight.js/highlight.min.js')->status_is(200)->content_type_is('application/javascript');
$t->get_ok('/mojo/highlight.js/mojolicious.min.js')->status_is(200)->content_type_is('application/javascript');
$t->get_ok('/mojo/highlight.js/highlight-mojo-dark.css')->status_is(200)->content_type_is('text/css');
Expand Down
2 changes: 0 additions & 2 deletions t/mojolicious/production_app.t
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@ is $t->app->static->file('does_not_exist.html'), undef,
is $t->app->moniker, 'mojolicious_test', 'right moniker';

# Remove extra files
isnt $t->app->static->file('mojo/jquery/jquery.js'), undef, 'found jQuery';
delete $t->app->static->extra->{'mojo/jquery/jquery.js'};
is $t->app->static->file('mojo/jquery/jquery.js'), undef, 'no jQuery';

# Default namespaces
Expand Down

0 comments on commit fd8733e

Please sign in to comment.