Adding latest updates to elements
This commit is contained in:
Tony Lea
parent
c39fa24dd9
commit
7d5e8dfa0a
@ -101,7 +101,7 @@
|
||||
"menubar" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"navigation-menu" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"pagination" : "w-full flex items-end justify-center",
|
||||
"popover" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"popover" : "w-full p-10 box-border h-full flex items-center justify-center",
|
||||
"progress" : "w-full max-w-sm mx-auto p-10 box-border flex items-center justify-center",
|
||||
"quotes" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"radio-group" : "w-full p-10 box-border flex items-center justify-center",
|
||||
|
||||
@ -7,6 +7,6 @@
|
||||
"explanation" : "The accordion UI element on a website is like a digital filing cabinet, revealing and concealing sections of information with a click, granting users the power to navigate the web's vastness while maintaining order and harmony.",
|
||||
"alert_notification" : {
|
||||
"title" : "Not seeing the animation?",
|
||||
"description" : "We are using the <a href=\"https://alpinejs.dev/plugins/collapse\" target=\"_blank\" class=\"underline\">AlpineJS collapse plug-in</a> in this example. Simply, include it in your project and you will see the collapse plug-in in action."
|
||||
"description" : "We are using the <a href=\"https://alpinejs.dev/plugins/collapse\" target=\"_blank\" class=\"underline\">AlpineJS collapse plugin</a> in this example. Simply, include it in your project and you will see the collapse plugin in action."
|
||||
}
|
||||
}
|
||||
@ -16,7 +16,7 @@
|
||||
<div :class="{ '-rotate-45 translate-y-[3px] duration-300' : fullscreenMenu, 'group-hover:translate-y-0.5 duration-300' : !fullscreenMenu }" class="h-[3px] bg-black w-full transform transition ease-out"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ '-translate-x-full' : !fullscreenMenu }" class="fixed inset-0 z-10 z-50 flex flex-col items-start justify-center w-screen h-screen py-10 pl-16 space-y-5 font-bold transition duration-300 transform bg-white ease">
|
||||
<div :class="{ '-translate-x-full' : !fullscreenMenu }" class="fixed inset-0 z-10 flex flex-col items-start justify-center w-screen h-screen py-10 pl-16 space-y-5 font-bold transition duration-300 transform bg-white ease">
|
||||
<svg onclick="window.location='#_'" preserveAspectRatio="xMinYMin meet" viewBox="0 0 56 18" class="w-full h-full pl-10 text-left uppercase cursor-pointer hover:text-blue-600">
|
||||
<text x="0" y="15" class="block w-full" text-anchor="start" fill="currentColor">Home</text>
|
||||
</svg>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
hoverCardHovered: false,
|
||||
hoverCardTimout: null,
|
||||
hoverCardLeaveTimeout: null,
|
||||
hoverCardDelay: 1000,
|
||||
hoverCardDelay: 600,
|
||||
hoverCardLeaveDelay: 500,
|
||||
hoverCardEnter () {
|
||||
clearTimeout(this.hoverCardLeaveTimeout);
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
});
|
||||
},
|
||||
popoverPositionCalculate(){
|
||||
console.log(this.$refs.popoverButton.getBoundingClientRect().top)
|
||||
if(window.innerHeight < (this.$refs.popoverButton.getBoundingClientRect().top + this.$refs.popoverButton.offsetHeight + this.popoverOffset + this.popoverHeight)){
|
||||
this.popoverPosition = 'top';
|
||||
} else {
|
||||
|
||||
@ -108,7 +108,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
console.log(this.selectItemsFindBestMath());
|
||||
if(this.selectKeydownValue != ''){
|
||||
clearTimeout(this.selectKeydownClearTimeout);
|
||||
this.selectKeydownClearTimeout = setTimeout(() => {
|
||||
@ -138,11 +137,6 @@
|
||||
} else {
|
||||
this.selectDropdownPosition = 'bottom';
|
||||
}
|
||||
console.log(selectDropdownBottomPos);
|
||||
//console.log(this.$refs.selectButton.getBoundingClientRect().top + this.$refs.selectButton.offsetHeight);
|
||||
//console.log(this.$refs.selectableItemsList.getBoundingClientRect().top);
|
||||
//console.log(parseInt(window.getComputedStyle(this.$refs.selectableItemsList).marginTop));
|
||||
// console.log(window.getComputedStyle(this.$refs.selectableItemsList).maxHeight);
|
||||
}
|
||||
}"
|
||||
x-init="
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
type="button"
|
||||
@click="switchOn = ! switchOn"
|
||||
:class="switchOn ? 'bg-neutral-900' : 'bg-neutral-200'"
|
||||
class="relative inline-flex h-4 py-0.5 ml-4 rounded-full focus:outline-none w-7"
|
||||
class="relative inline-flex h-4 py-0.5 ml-4 rounded-full focus:outline-none w-6"
|
||||
x-cloak>
|
||||
<span :class="switchOn ? 'translate-x-[14px]' : 'translate-x-0.5'" class="w-3 h-3 duration-200 ease-in-out bg-white rounded-full shadow-md"></span>
|
||||
<span :class="switchOn ? 'translate-x-[10px]' : 'translate-x-0.5'" class="w-3 h-3 duration-200 ease-in-out bg-white rounded-full shadow-md"></span>
|
||||
</button>
|
||||
|
||||
<label @click="$refs.switchButton.click(); $refs.switchButton.focus()" :id="$id('switch')"
|
||||
|
||||
@ -27,8 +27,6 @@
|
||||
this.timeElapsedString = `${time.minutes}:${time.seconds}`;
|
||||
},
|
||||
metaDataLoaded(event) {
|
||||
console.log(event.target.duration);
|
||||
console.log('super!');
|
||||
this.videoDuration = event.target.duration;
|
||||
this.$refs.videoProgress.setAttribute('max', this.videoDuration);
|
||||
|
||||
@ -154,7 +152,7 @@
|
||||
x-ref="videoContainer"
|
||||
@mouseleave="mouseleave=true"
|
||||
@mousemove="mousemoveVideo"
|
||||
class="relative h-[360px] overflow-hidden rounded-md aspect-video">
|
||||
class="relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video">
|
||||
<video
|
||||
x-ref="player"
|
||||
@loadedmetadata="metaDataLoaded"
|
||||
|
||||
@ -28,8 +28,6 @@
|
||||
this.timeElapsedString = `${time.minutes}:${time.seconds}`;
|
||||
},
|
||||
metaDataLoaded(event) {
|
||||
console.log(event.target.duration);
|
||||
console.log('super!');
|
||||
this.videoDuration = event.target.duration;
|
||||
this.$refs.videoProgress.setAttribute('max', this.videoDuration);
|
||||
|
||||
@ -155,7 +153,7 @@
|
||||
x-ref="videoContainer"
|
||||
@mouseleave="mouseleave=true"
|
||||
@mousemove="mousemoveVideo"
|
||||
class="relative h-[360px] overflow-hidden rounded-md aspect-video" x-cloak>
|
||||
class="relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video" x-cloak>
|
||||
<video
|
||||
x-ref="player"
|
||||
@loadedmetadata="metaDataLoaded"
|
||||
|
||||
@ -28,8 +28,6 @@
|
||||
this.timeElapsedString = `${time.minutes}:${time.seconds}`;
|
||||
},
|
||||
metaDataLoaded(event) {
|
||||
console.log(event.target.duration);
|
||||
console.log('super!');
|
||||
this.videoDuration = event.target.duration;
|
||||
this.$refs.videoProgress.setAttribute('max', this.videoDuration);
|
||||
|
||||
@ -155,7 +153,7 @@
|
||||
x-ref="videoContainer"
|
||||
@mouseleave="mouseleave=true"
|
||||
@mousemove="mousemoveVideo"
|
||||
class="relative h-[360px] overflow-hidden rounded-md aspect-video">
|
||||
class="relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video">
|
||||
<video
|
||||
x-ref="player"
|
||||
@loadedmetadata="metaDataLoaded"
|
||||
|
||||
216
getting-started/alpine-plugin.html
Normal file
216
getting-started/alpine-plugin.html
Normal file
@ -0,0 +1,216 @@
|
||||
<div class="not-prose">
|
||||
<h2 class="pt-0 mb-2 text-3xl font-bold tracking-tight select-none not-prose custom-font">Creating an Alpine Plugin</h2>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500">Creating an Alpine Plugin is very simple and will allow you to create re-usable components. Alpine has some great documentation on <a href="https://alpinejs.dev/advanced/extending" target="_blank">extending functionality into your own plugin</a>; however, it will be beneficial to give you a specific example.
|
||||
|
||||
<p class="text-gray-500">Lets learn how to extract the <a href="/pines/docs/tooltip" @click="activeMenuItem = 'tooltip'; loadPage($event)" @mouseenter="fetchPage($event)">tooltip</a> element so that it can be used as a custom Alpine directive, like so:</p>
|
||||
|
||||
<pre class="block w-full overflow-scroll text-sm border rounded-md hljs"><code class="hljs html"><div x-data x-tooltip="Your tooltip text here">
|
||||
hover me
|
||||
</div></code></pre>
|
||||
|
||||
<p class="text-gray-500">Below is the code for the <a href="/pines/docs/tooltip" @click="activeMenuItem = 'tooltip'; loadPage($event)" @mouseenter="fetchPage($event)">Alpine Tooltip Element</a>:
|
||||
|
||||
<pre class="block w-full overflow-scroll text-sm border rounded-md hljs"><code class="hljs html"><div
|
||||
x-data="{
|
||||
tooltipVisible: false,
|
||||
tooltipText: 'Tooltip text',
|
||||
tooltipArrow: true,
|
||||
tooltipPosition: 'top',
|
||||
}"
|
||||
x-init="$refs.content.addEventListener('mouseenter', () => { tooltipVisible = true; }); $refs.content.addEventListener('mouseleave', () => { tooltipVisible = false; });"
|
||||
class="relative">
|
||||
|
||||
<div x-ref="tooltip" x-show="tooltipVisible" :class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-0.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-0.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-0.5 right-0 translate-x-full' : tooltipPosition == 'right' }" class="absolute w-auto text-sm" x-cloak>
|
||||
<div x-show="tooltipVisible" x-transition class="relative px-2 py-1 text-white bg-black rounded bg-opacity-90">
|
||||
<p x-text="tooltipText" class="flex-shrink-0 block text-xs whitespace-nowrap"></p>
|
||||
<div x-ref="tooltipArrow" x-show="tooltipArrow" :class="{ 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom', 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right' }" class="absolute inline-flex items-center justify-center overflow-hidden">
|
||||
<div :class="{ 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom', 'origin-top-right -rotate-45' : tooltipPosition == 'right' }" class="w-1.5 h-1.5 transform bg-black bg-opacity-90"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-ref="content" class="px-3 py-1 text-xs rounded-full cursor-pointer text-neutral-500 bg-neutral-100">hover me</div>
|
||||
|
||||
</div></code></pre>
|
||||
|
||||
<div role="alert" class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-5 [&>svg+div]:translate-y-0 [&:has(svg)]:pl-11 flex items-center text-foreground">
|
||||
<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 -translate-y-px"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" /></svg>
|
||||
<div class="text-sm">First we will show you the final plugin code and then we will dissect it to show you how it works.</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500">To make this tooltip functionality re-useable we could extract it into its own plugin, like so:</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code id="plugin-example" class="hljs html"><script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
|
||||
Alpine.directive('tooltip', (el, { modifiers, expression }, { cleanup }) => {
|
||||
let tooltipText = expression;
|
||||
let tooltipArrow = modifiers.includes('noarrow') ? false : true;
|
||||
let tooltipPosition = 'top';
|
||||
let tooltipId = 'tooltip-' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
|
||||
let positions = ['top', 'bottom', 'left', 'right'];
|
||||
let elementPosition = getComputedStyle(el).position;
|
||||
|
||||
for (let position of positions) {
|
||||
if (modifiers.includes(position)) {
|
||||
tooltipPosition = position;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(!elementPosition.includes(['relative', 'absolute', 'fixed'])){
|
||||
el.style.position='relative';
|
||||
}
|
||||
|
||||
let tooltipHTML = `
|
||||
<div id="${tooltipId}" x-data="{ tooltipVisible: false, tooltipText: '${tooltipText}', tooltipArrow: ${tooltipArrow}, tooltipPosition: '${tooltipPosition}' }" x-ref="tooltip" x-init="setTimeout(function(){ tooltipVisible = true; }, 1);" x-show="tooltipVisible" :class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-0.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-1.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-1.5 right-0 translate-x-full' : tooltipPosition == 'right' }" class="absolute w-auto text-sm" x-cloak>
|
||||
<div x-show="tooltipVisible" x-transition class="relative px-2 py-1 text-white bg-black rounded bg-opacity-90">
|
||||
<p x-text="tooltipText" class="flex-shrink-0 block text-xs whitespace-nowrap"></p>
|
||||
<div x-ref="tooltipArrow" x-show="tooltipArrow" :class="{ 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom', 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right' }" class="absolute inline-flex items-center justify-center overflow-hidden">
|
||||
<div :class="{ 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom', 'origin-top-right -rotate-45' : tooltipPosition == 'right' }" class="w-1.5 h-1.5 transform bg-black bg-opacity-90"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
el.dataset.tooltip = tooltipId;
|
||||
|
||||
let mouseEnter = function(event){
|
||||
el.innerHTML += tooltipHTML;
|
||||
};
|
||||
|
||||
let mouseLeave = function(event){
|
||||
document.getElementById(event.target.dataset.tooltip).remove();
|
||||
};
|
||||
|
||||
el.addEventListener('mouseenter', mouseEnter);
|
||||
el.addEventListener('mouseleave', mouseLeave);
|
||||
|
||||
cleanup(() => {
|
||||
el.removeEventListener('mouseenter', mouseEnter);
|
||||
el.removeEventListener('mouseleave', mouseLeave);
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Then, include a tooltip anwhere in your code -->
|
||||
<div class="w-screen h-screen flex items-center justify-center">
|
||||
<div x-data x-tooltip.top="hello">
|
||||
hover me
|
||||
</div>
|
||||
</div></code></pre>
|
||||
|
||||
<div class="text-left">
|
||||
<button onclick="window.dispatchEvent(new CustomEvent('load-from-codeblock', { detail: { id: 'plugin-example' }}));" class="inline-flex items-center justify-center px-4 py-2.5 text-xs font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none">
|
||||
<svg class="w-4 h-4 mr-2 -ml-1 -translate-y-px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M10.1893 8.12241C9.48048 8.50807 9.66948 9.5633 10.4691 9.68456L13.5119 10.0862C13.7557 10.1231 13.7595 10.6536 13.7968 10.8949L14.2545 13.5486C14.377 14.3395 15.4432 14.5267 15.8333 13.8259L17.1207 11.3647C17.309 11.0046 17.702 10.7956 18.1018 10.8845C18.8753 11.1023 19.6663 11.3643 20.3456 11.4084C21.0894 11.4567 21.529 10.5994 21.0501 10.0342C20.6005 9.50359 20.0352 8.75764 19.4669 8.06623C19.2213 7.76746 19.1292 7.3633 19.2863 7.00567L20.1779 4.92643C20.4794 4.23099 19.7551 3.52167 19.0523 3.82031L17.1037 4.83372C16.7404 4.99461 16.3154 4.92545 16.0217 4.65969C15.3919 4.08975 14.6059 3.39451 14.0737 2.95304C13.5028 2.47955 12.6367 2.91341 12.6845 3.64886C12.7276 4.31093 13.0055 5.20996 13.1773 5.98734C13.2677 6.3964 13.041 6.79542 12.658 6.97364L10.1893 8.12241Z" stroke="currentColor" stroke-width="1.5"></path><path d="M12.1575 9.90759L3.19359 18.8714C2.63313 19.3991 2.61799 20.2851 3.16011 20.8317C3.70733 21.3834 4.60355 21.3694 5.13325 20.8008L13.9787 11.9552" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 6.25V3.75M3.75 5H6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18 20.25V17.75M16.75 19H19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
|
||||
<span class="leading-none -translate-y-px">Open this Plugin in the Playground</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500">Now, you will be able to use the <code>x-tooltip</code> directive anywhere you want to include a tooltip.</p>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Understanding how to build the plugin</h3>
|
||||
|
||||
<p class="text-gray-500">First, we will want to create the directive. We can do so with the following line:</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code class="javascript html">Alpine.directive('tooltip', (el, { modifiers, expression }, { cleanup }) => {</code></pre>
|
||||
|
||||
<p class="text-gray-500">This will give us the ability to use the <code>x-tooltip</code> directive. Then, we want to define all our variables:</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code class="javascript">// The text that will be displayed in the tooltip
|
||||
let tooltipText = expression;
|
||||
// Hide the arrow if the directive has a .noarrow modifier
|
||||
let tooltipArrow = modifiers.includes('noarrow') ? false : true;
|
||||
// The default tooltip position will be set to 'top'
|
||||
let tooltipPosition = 'top';
|
||||
// We need to create a dynamic ID so that way we can reference the tooltip element when we want to add or remove it
|
||||
let tooltipId = 'tooltip-' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
|
||||
// These are all the possible positions for the tooltip
|
||||
let positions = ['top', 'bottom', 'left', 'right'];
|
||||
// We need to check the position of the element that the tooltip is attached to, if it is not relative, absolute, or fixed, then we will set it to relative
|
||||
let elementPosition = getComputedStyle(el).position;</code></pre>
|
||||
|
||||
<p class="text-gray-500">Next we will loop through all the positions to see if the directive has any of the following modifiers `.top, .left, .bottom, .right`.</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code class="javascript">for (let position of positions) {
|
||||
if (modifiers.includes(position)) {
|
||||
tooltipPosition = position;
|
||||
break;
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p class="text-gray-500">This will allow modifiers to specify the position of the tooltip:</p>
|
||||
|
||||
<ul>
|
||||
<li>x-tooltip.top="tooltip on the top"</li>
|
||||
<li>x-tooltip.left="tooltip on the left"</li>
|
||||
<li>x-tooltip.bottom="tooltip on the bottom"</li>
|
||||
<li>x-tooltip.right="tooltip on the right"</li>
|
||||
</ul>
|
||||
|
||||
<p class="text-gray-500">Because our tooltip has an absolute position we need the parent element to have a position of relative, absolute, or fixed. If it is not we will set the position to relative:</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code class="javascript">if(!elementPosition.includes(['relative', 'absolute', 'fixed'])){
|
||||
el.style.position='relative';
|
||||
}</code></pre>
|
||||
|
||||
<p class="text-gray-500">Then, we store the HTML of our tooltip so we can append it to the element when it's hovered.</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code class="javascript">let tooltipHTML = `
|
||||
<div id="${tooltipId}" x-data="{ tooltipVisible: false, tooltipText: '${tooltipText}', tooltipArrow: ${tooltipArrow}, tooltipPosition: '${tooltipPosition}' }" x-ref="tooltip" x-init="setTimeout(function(){ tooltipVisible = true; }, 1);" x-show="tooltipVisible" :class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-0.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-1.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-1.5 right-0 translate-x-full' : tooltipPosition == 'right' }" class="absolute w-auto text-sm" x-cloak>
|
||||
<div x-show="tooltipVisible" x-transition class="relative px-2 py-1 text-white bg-black rounded bg-opacity-90">
|
||||
<p x-text="tooltipText" class="flex-shrink-0 block text-xs whitespace-nowrap"></p>
|
||||
<div x-ref="tooltipArrow" x-show="tooltipArrow" :class="{ 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom', 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right' }" class="absolute inline-flex items-center justify-center overflow-hidden">
|
||||
<div :class="{ 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom', 'origin-top-right -rotate-45' : tooltipPosition == 'right' }" class="w-1.5 h-1.5 transform bg-black bg-opacity-90"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;</code></pre>
|
||||
|
||||
<p class="text-gray-500">Next, we need to set the tooltip ID to the element's dataset so that way we can reference it later on.</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code class="javascript">el.dataset.tooltip = tooltipId;</code></pre>
|
||||
|
||||
<p class="text-gray-500">When the user hovers the element we want to append the <strong>tooltip HTML</strong>, and when their mouse leaves the element we want to remove it:</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code class="javascript">let mouseEnter = function(event){
|
||||
el.innerHTML += tooltipHTML;
|
||||
};
|
||||
|
||||
let mouseLeave = function(event){
|
||||
document.getElementById(event.target.dataset.tooltip).remove();
|
||||
};
|
||||
|
||||
el.addEventListener('mouseenter', mouseEnter);
|
||||
el.addEventListener('mouseleave', mouseLeave);</code></pre>
|
||||
|
||||
<p class="text-gray-500">Finally, the last peice of code is using a helper callback function called <strong>cleanup()</strong> that is provided by AlpineJS. It will allow us to perform any cleanup functionality, such as removing event listeners, whenever the parent element is removed from the DOM:</p>
|
||||
|
||||
<pre class="block w-full mt-2 overflow-scroll text-sm border rounded-md hljs"><code class="javascript">cleanup(() => {
|
||||
el.removeEventListener('mouseenter', mouseEnter);
|
||||
el.removeEventListener('mouseleave', mouseLeave);
|
||||
})</code></pre>
|
||||
|
||||
<p class="text-gray-500">And that's how you would go about creating a simple Alpine plugin that can be re-used throughout your application.</p>
|
||||
|
||||
<div role="alert" class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-5 [&>svg+div]:translate-y-0 [&:has(svg)]:pl-11 flex items-start text-foreground">
|
||||
<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 -mt-px translate-y-1"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" /></svg>
|
||||
<div class="text-sm">Every element contains different functionality, so creating a plugin for each element will be different as well. But, hopefully this example will set you on the right path to abstracting plugins for future use.</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Why not create Pines as a separate library</h3>
|
||||
|
||||
<p class="text-gray-500">We wanted to build a set of UI elements that are highly customizable and flexible. These elements will allow developers to easily integrate them with any <a href="https://tallstack.dev" target="_blank">Tallstack</a> application. This will let you to use these elements and possibly even build your own UI library 😉 If you only use a handful of these elements, you can use them separately and you won't end up including a ton of functionality you don't even use.</p>
|
||||
|
||||
<p class="text-gray-500">It's possible that this could change down the road or we might keep it the same and build a ton more copy-paste components. Be sure to give us a <a href="https://github.com/thedevdojo/pines" target="_blank">Star on Github</a> and <a href="/pines/docs/contribution" @click="activeMenuItem = 'contribution'; loadPage($event)">contribute</a> if you want to help steer the direction of this project.</p>
|
||||
@ -1,8 +1,8 @@
|
||||
<div class="not-prose">
|
||||
<h2 class="pt-0 mb-2 text-3xl font-bold tracking-tight select-none not-prose custom-font">Contribution</h2>
|
||||
</div>
|
||||
<p class="text-gray-500">You may contribute to this project by visiting the Github Repo here. We currently do not have issues open, so you'll need to submit a PR with you contribution and we'll get to the PR as soon as we can.</p>
|
||||
<p class="text-gray-500">If you wish to discuss functionality or any issues you have with Pines, you can visit the DevDojo Discussions/Questions section.</p>
|
||||
<p class="text-gray-500">You may contribute to this project by <a href="https://github.com/thedevdojo/pines" target="_blank">visiting the Github Repo here</a>. We currently do not have issues open, so you'll need to submit a PR with your contribution and we'll get to the PR as soon as we can.</p>
|
||||
<p class="text-gray-500">If you wish to discuss functionality or any issues you have with Pines, you can <a href="https://devdojo.com/questions" target="_blank">visit the DevDojo Discussions/Questions section</a>.</p>
|
||||
|
||||
<div class="relative w-full rounded-lg border border-transparent p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 bg-yellow-500 text-white">
|
||||
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" /></svg>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="not-prose">
|
||||
<h2 class="pt-0 mb-2 text-3xl font-bold tracking-tight select-none not-prose custom-font">How To Use</h2>
|
||||
</div>
|
||||
<p class="text-gray-500">Pines, is super easy to use. If your application uses AlpineJS and TailwindCSS, you can copy and paste an element into your page an it will work flawlessly. If you want to test an element on a single HTML page, you can copy/paste this snippet below into any `.html` file:</p>
|
||||
<p class="text-gray-500">Pines, is super easy to use. If your application uses Alpine and Tailwind, you can copy and paste an element into your page an it will work flawlessly. If you want to test an element on a single HTML page, you can copy/paste this snippet below into any `.html` file:</p>
|
||||
|
||||
<pre class="block w-full overflow-scroll text-sm border rounded-md hljs html border-neutral-200"><code class="hljs html"><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@ -34,3 +34,18 @@
|
||||
<h3>The Pines Playground</h3>
|
||||
|
||||
<p class="text-gray-500">You may also open up the <button class="text-blue-600 underline" onclick="window.dispatchEvent(new CustomEvent('open-playground', { detail: {}}));">Pines Playground</button> and edit any element or design your own. Keep in mind that the data entered into the playground will not be saved, so if you leave the page you may lose any changes. However, it may be the easiest way to make a few modifications to an element or create your own.</p>
|
||||
|
||||
<h3>Re-usability</h3>
|
||||
|
||||
<p class="text-gray-500">Pines isn't a standalone library, but rather a collection of elements for Alpine and Tailwind projects. This will make it a delight to integrate with your <a href="https://tallstack.dev" target="_blank">TALL stack applications</a>; however, some of these elements you may want to make re-usable. One such element is the tooltip element, which you may want to extract it into it's own Alpine plugin, allowing you to do something like this:</p>
|
||||
|
||||
<pre class="block w-full mb-0 overflow-scroll text-sm border rounded-b-none rounded-t-md border-neutral-900" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"><code class="hljs html"><div x-tooltip="Your tooltip text here">
|
||||
hover me
|
||||
</div></code></pre>
|
||||
|
||||
<div role="alert" class="relative w-full -translate-y-px rounded-b-lg border border-black p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&:has(svg)]:pl-11 bg-black text-white">
|
||||
<svg class="w-4 h-4 translate-y-0.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M10.1893 8.12241C9.48048 8.50807 9.66948 9.5633 10.4691 9.68456L13.5119 10.0862C13.7557 10.1231 13.7595 10.6536 13.7968 10.8949L14.2545 13.5486C14.377 14.3395 15.4432 14.5267 15.8333 13.8259L17.1207 11.3647C17.309 11.0046 17.702 10.7956 18.1018 10.8845C18.8753 11.1023 19.6663 11.3643 20.3456 11.4084C21.0894 11.4567 21.529 10.5994 21.0501 10.0342C20.6005 9.50359 20.0352 8.75764 19.4669 8.06623C19.2213 7.76746 19.1292 7.3633 19.2863 7.00567L20.1779 4.92643C20.4794 4.23099 19.7551 3.52167 19.0523 3.82031L17.1037 4.83372C16.7404 4.99461 16.3154 4.92545 16.0217 4.65969C15.3919 4.08975 14.6059 3.39451 14.0737 2.95304C13.5028 2.47955 12.6367 2.91341 12.6845 3.64886C12.7276 4.31093 13.0055 5.20996 13.1773 5.98734C13.2677 6.3964 13.041 6.79542 12.658 6.97364L10.1893 8.12241Z" stroke="currentColor" stroke-width="1.5"></path><path d="M12.1575 9.90759L3.19359 18.8714C2.63313 19.3991 2.61799 20.2851 3.16011 20.8317C3.70733 21.3834 4.60355 21.3694 5.13325 20.8008L13.9787 11.9552" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 6.25V3.75M3.75 5H6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18 20.25V17.75M16.75 19H19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
|
||||
<div class="text-sm [&_p]:leading-relaxed">By doing this, you can include multiple tooltips in your application and modify the appearance and functionionality in one place.</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500">In the next section you will learn how simple it can be to extract an element into its own plugin.</p>
|
||||
|
||||
1
main.js
1
main.js
@ -18,7 +18,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
if(element.includes('-examples')){
|
||||
element = element.replace('-examples', '').split('/')[0];
|
||||
}
|
||||
console.log(element);
|
||||
document.getElementById('content').className = data.container[element];
|
||||
} else {
|
||||
document.getElementById('content').className = 'max-w-3xl p-10 prose';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user