Skip to content

Commit

Permalink
Merge pull request #4 from Group-One-Technology/jr.feat-tonic-dialogs
Browse files Browse the repository at this point in the history 
Feature: Tonic Modal
  • Loading branch information
@jorenrui
jorenrui authored Nov 14, 2023
2 parents 7ed1cb7 + 7c9553e commit e1daec9
Showing 1 changed file with 200 additions and 0 deletions.
200 changes: 200 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -874,6 +874,206 @@ <h1 class="text-xl text-gray-900 font-bold">
</div>
</div>
</section>


<section class="p-5 bg-gray-100 mt-10">
<div class="max-w-5xl mx-auto">
<div class="flex items-center justify-between mb-5">
<h3 class="font-bold font-mono">Tonic Dialog:</h3>
<button
:click="showCode7 = !showCode7"
class="px-5 py-2 flex items-center bg-white text-xs uppercase font-bold font-mono border shadow rounded-full hover:bg-blue-50"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-4 h-4 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
</svg>
Show Code
</button>
</div>

<div>
<style>
.shimmer {
background: #f6f7f8;
background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-repeat: no-repeat;
background-size: 800px 100px;
position: relative;

animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}

@keyframes placeholderShimmer {
0% {
background-position: -468px 0;
}

100% {
background-position: 468px 0;
}
}
</style>
<script>
function openModal() {
const loader = document.createElement('div');
loader.className = 'shimmer h-32 w-full';
loader.style.minWidth = '300px';
document.querySelector('#modal-container-content').innerHTML = loader.outerHTML;

const modalOuter = document.querySelector('#modal-outer');
modalOuter.classList.remove('opacity-0', 'pointer-events-none');
modalOuter.classList.add('opacity-100', 'pointer-events-auto');

const modalInner = document.querySelector('#modal-inner');
modalInner.classList.remove('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95');
modalInner.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100');
}

function closeModal() {
const modalOuter = document.querySelector('#modal-outer');
modalOuter.classList.remove('opacity-100', 'pointer-events-auto');
modalOuter.classList.add('opacity-0', 'pointer-events-none');

const modalInner = document.querySelector('#modal-inner');
modalInner.classList.remove('opacity-100', 'translate-y-0', 'sm:scale-100');
modalInner.classList.add('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95');
}
</script>

<a
class="bg-indigo-600 hover:bg-indigo-800 transition-all text-white rounded px-3 py-2 cursor-pointer"
:click="openModal()"
>
Open Modal
</a>

<div
id="modal-outer"
class="relative z-10 opacity-0 duration-300 transition-all pointer-events-none"
aria-labelledby="modal-title"
aria-modal="true"
:click="if (event.target.id == 'modal-container-outer') { closeModal() }"
>
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div id="modal-inner" class="transition-all fixed inset-0 z-10 overflow-y-auto opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<div id="modal-container-outer" class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div class="relative">
<button
style="left:-30px; top:2rem"
class="hidden md:block cursor-pointer absolute"
:click="closeModal()"
aria-label="Close Modal"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<div id="modal-container-content" class="overflow-y-scroll rounded-lg bg-white max-h-96 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:w-96 sm:p-6">
</div>
</div>
</div>
</div>
</div>
</div>

<div :class="showCode7 ? 'block' : 'hidden'">
<pre>
<code class="language-html text-xs overflow-hidden rounded-lg">
&lt;style&gt;
.shimmer {
background: #f6f7f8;
background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-repeat: no-repeat;
background-size: 800px 100px;
position: relative;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
@keyframes placeholderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
&lt;/style&gt;

&lt;script&gt;
function openModal() {
const loader = document.createElement('div');
loader.className = 'shimmer h-32 w-full';
loader.style.minWidth = '300px';
document.querySelector('#modal-container-content').innerHTML = loader.outerHTML;

const modalOuter = document.querySelector('#modal-outer');
modalOuter.classList.remove('opacity-0', 'pointer-events-none');
modalOuter.classList.add('opacity-100', 'pointer-events-auto');

const modalInner = document.querySelector('#modal-inner');
modalInner.classList.remove('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95');
modalInner.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100');
}

function closeModal() {
const modalOuter = document.querySelector('#modal-outer');
modalOuter.classList.remove('opacity-100', 'pointer-events-auto');
modalOuter.classList.add('opacity-0', 'pointer-events-none');

const modalInner = document.querySelector('#modal-inner');
modalInner.classList.remove('opacity-100', 'translate-y-0', 'sm:scale-100');
modalInner.classList.add('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95');
}
&lt;/script&gt;

&lt;a
class=&quot;bg-indigo-600 hover:bg-indigo-800 transition-all text-white rounded px-3 py-2 cursor-pointer&quot;
:click=&quot;openModal()&quot;
&gt;
Open Modal
&lt;/a&gt;

&lt;div
id=&quot;modal-outer&quot;
class=&quot;relative z-10 opacity-0 duration-300 transition-all pointer-events-none&quot;
aria-labelledby=&quot;modal-title&quot;
aria-modal=&quot;true&quot;
:click=&quot;if (event.target.id == 'modal-container-outer') { closeModal() }&quot;
&gt;
&lt;div class=&quot;fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;modal-inner&quot; class=&quot;transition-all fixed inset-0 z-10 overflow-y-auto opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95&quot;&gt;
&lt;div id=&quot;modal-container-outer&quot; class=&quot;flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0&quot;&gt;
&lt;div class=&quot;relative&quot;&gt;
&lt;button
style=&quot;left:-30px; top:2rem&quot;
class=&quot;hidden md:block cursor-pointer absolute&quot;
:click=&quot;closeModal()&quot;
aria-label=&quot;Close Modal&quot;
&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke-width=&quot;1.5&quot; stroke=&quot;currentColor&quot; class=&quot;w-6 h-6 text-white&quot;&gt;
&lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; d=&quot;M6 18L18 6M6 6l12 12&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;div id=&quot;modal-container-content&quot; class=&quot;overflow-y-scroll rounded-lg bg-white max-h-96 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:w-96 sm:p-6&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code>
</pre>
</div>
</div>
</section>
</body>

</html>

0 comments on commit e1daec9

Please sign in to comment.