-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added standard tailwind modal partial and js files
- Loading branch information
1 parent
07e0ffc
commit 3c6437b
Showing
3 changed files
with
108 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
// Standard flex360/pilot modal is designed to have multiple modals on one page: | ||
/* | ||
1. include <script src="/pilot-assets/legacy/js/modal.js"></script> on page | ||
2. Create a button that has: | ||
onclick="toggleModal({{ $model->id }})" attribute | ||
3. Then include the modal partial and pass in the current model: | ||
@include('pilot::partials.modal', compact($model)) | ||
4. If you'd like to override the modal, create "view->vendor->partials->modal.blade.php | ||
Full example: | ||
@foreach ($models as $model) | ||
<a onclick="toggleModal({{ $model->id }})" class="flex items-center font-display font-medium text-primaryBlue hover:darkBackground transition-colors ease-linear duration-300 cursor-pointer">View Credit Terms</a> | ||
@include('pilot::partials.modal', compact($model)) | ||
@endforeach | ||
*/ | ||
|
||
//If escape key is pressed, turn modal off | ||
document.onkeydown = function(evt) { | ||
evt = evt || window.event; | ||
var isEscape = false; | ||
if ("key" in evt) { | ||
isEscape = (evt.key === "Escape" || evt.key === "Esc"); | ||
} else { | ||
isEscape = (evt.keyCode === 27); | ||
} | ||
if (isEscape && document.body.classList.contains('modal-active')) { | ||
const body = document.querySelector('body'); | ||
var modal = document.querySelector('.modal-is-open'); | ||
modal.classList.toggle('opacity-0'); | ||
modal.classList.toggle('pointer-events-none'); | ||
modal.classList.toggle('modal-is-open'); | ||
body.classList.toggle('modal-active'); | ||
} | ||
}; | ||
|
||
// set onclick="toggleModal({{ $model->id }})", that will toggle the corresponding modal attached for this button | ||
function toggleModal (id) { | ||
const body = document.querySelector('body'); | ||
var modal = document.querySelector('.modal-id-' + id); | ||
modal.classList.toggle('opacity-0'); | ||
modal.classList.toggle('pointer-events-none'); | ||
modal.classList.toggle('modal-is-open'); | ||
body.classList.toggle('modal-active'); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
<!--Modal # {{ $offer->id }} --> | ||
<div class="fixed z-10 inset-0 overflow-y-auto modal-id-{{ $offer->id }} opacity-0 pointer-events-none"> | ||
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | ||
<!-- | ||
Background overlay, show/hide based on modal state. | ||
Entering: "ease-out duration-300" | ||
From: "opacity-0" | ||
To: "opacity-100" | ||
Leaving: "ease-in duration-200" | ||
From: "opacity-100" | ||
To: "opacity-0" | ||
--> | ||
<div onclick="toggleModal({{ $offer->id }})" class="fixed inset-0 transition-opacity"> | ||
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> | ||
</div> | ||
|
||
<!-- This element is to trick the browser into centering the modal contents. --> | ||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​ | ||
<!-- | ||
Modal panel, show/hide based on modal state. | ||
Entering: "ease-out duration-300" | ||
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" | ||
To: "opacity-100 translate-y-0 sm:scale-100" | ||
Leaving: "ease-in duration-200" | ||
From: "opacity-100 translate-y-0 sm:scale-100" | ||
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" | ||
--> | ||
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline"> | ||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | ||
<div class="sm:flex sm:items-start"> | ||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | ||
<h3 class="text-2xl leading-6 font-medium text-gray-900" id="modal-headline"> | ||
Offer Terms | ||
</h3> | ||
<div class="mt-2"> | ||
<p class="text-sm leading-5 text-gray-500"> | ||
{!! $offer->terms !!} | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | ||
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto"> | ||
<button onclick="toggleModal({{ $offer->id }})" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-blue-400 text-base leading-6 font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none focus:border-primaryBlue focus:shadow-outline-red transition ease-in-out duration-150 sm:text-sm sm:leading-5"> | ||
Close | ||
</button> | ||
</span> | ||
{{-- <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto"> | ||
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-iron shadow-sm hover:text-shark focus:outline-none focus:border-denim focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5"> | ||
Cancel | ||
</button> | ||
</span> --}} | ||
</div> | ||
</div> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters