tgrosinger/pines
1
0
Fork 0
Code

Adding some updated content to pines elements

Browse Source
This commit is contained in:
Tony Lea 2023-06-20 21:15:31 -04:00
parent a66b70ac94
commit 5c42b388ca
10 changed files with 126 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
elements/select.html
View File

@ -1,4 +1,5 @@
<div x-data="{
selectOpen: false,
selectedItem: '',
selectableItems: [
{
@ -60,8 +61,8 @@
selectableItemActive: null,
selectId: $id('select'),
selectKeydownValue: '',
selectKeydownClearTimeout: null,
selectKeydownTimeout: 1000,
selectKeydownClearTimeout: null,
selectDropdownPosition: 'bottom',
selectableItemIsActive(item) {
return this.selectableItemActive && this.selectableItemActive.value==item.value;
@ -80,7 +81,6 @@
this.selectScrollToActiveItem();
}
},
selectableItemsOpen: false,
selectScrollToActiveItem(){
if(this.selectableItemActive){
activeElement = document.getElementById(this.selectableItemActive.value + '-' + this.selectId)
@ -91,16 +91,14 @@
this.$refs.selectableItemsList.scrollTop=0;
}
}
// 224px;
},
selectKeydown(event){
if (event.keyCode >= 65 && event.keyCode <= 90) {
this.selectKeydownValue += event.key;
selectedItemBestMatch = this.selectItemsFindBestMath();
selectedItemBestMatch = this.selectItemsFindBestMatch();
if(selectedItemBestMatch){
if(this.selectableItemsOpen){
if(this.selectOpen){
this.selectableItemActive = selectedItemBestMatch;
this.selectScrollToActiveItem();
} else {
@ -116,14 +114,14 @@
}
}
},
selectItemsFindBestMath(){
selectItemsFindBestMatch(){
typedValue = this.selectKeydownValue.toLowerCase();
var bestMatch = null;
var bestMatchIndex = -1;
for (var i = 0; i < this.selectableItems.length; i++) {
var title = this.selectableItems[i].title.toLowerCase();
var index = title.indexOf(typedValue);
if (index > -1 && (bestMatchIndex == -1 || index < bestMatchIndex)) {
if (index > -1 && (bestMatchIndex == -1 || index < bestMatchIndex) && !this.selectableItems[i].disabled) {
bestMatch = this.selectableItems[i];
bestMatchIndex = index;
}
@ -140,7 +138,7 @@
}
}"
x-init="
$watch('selectableItemsOpen', function(){
$watch('selectOpen', function(){
if(!selectedItem){
selectableItemActive=selectableItems[0];
} else {
@ -153,40 +151,40 @@
window.addEventListener('resize', (event) => { selectPositionUpdate(); });
});
"
@keydown.escape="if(selectableItemsOpen){ selectableItemsOpen=false; }"
@keydown.down="if(selectableItemsOpen){ selectableItemActiveNext(); } else { selectableItemsOpen=true; } event.preventDefault();"
@keydown.up="if(selectableItemsOpen){ selectableItemActivePrevious(); } else { selectableItemsOpen=true; } event.preventDefault();"
@keydown.enter="selectedItem=selectableItemActive; selectableItemsOpen=false;"
@keydown.escape="if(selectOpen){ selectOpen=false; }"
@keydown.down="if(selectOpen){ selectableItemActiveNext(); } else { selectOpen=true; } event.preventDefault();"
@keydown.up="if(selectOpen){ selectableItemActivePrevious(); } else { selectOpen=true; } event.preventDefault();"
@keydown.enter="selectedItem=selectableItemActive; selectOpen=false;"
@keydown="selectKeydown($event);"
class="relative w-64">
<button x-ref="selectButton" @click="selectableItemsOpen=!selectableItemsOpen"
:class="{ 'focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400' : !selectableItemsOpen }"
class="relative min-h-[38px] flex items-center justify-between w-full py-2 pl-3 pr-10 text-left bg-white border rounded-md shadow-sm cursor-default border-neutral-200/70 focus:outline-none sm:text-sm">
<button x-ref="selectButton" @click="selectOpen=!selectOpen"
:class="{ 'focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400' : !selectOpen }"
class="relative min-h-[38px] flex items-center justify-between w-full py-2 pl-3 pr-10 text-left bg-white border rounded-md shadow-sm cursor-default border-neutral-200/70 focus:outline-none text-sm">
<span x-text="selectedItem ? selectedItem.title : 'Select Item'" class="truncate">Select Item</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5 text-gray-400"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd"></path></svg>
</span>
</button>
<ul x-show="selectableItemsOpen"
<ul x-show="selectOpen"
x-ref="selectableItemsList"
@click.away="selectableItemsOpen = false"
@click.away="selectOpen = false"
x-transition:enter="transition ease-out duration-50"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100"
:class="{ 'bottom-0 mb-10' : selectDropdownPosition == 'top', 'top-0 mt-10' : selectDropdownPosition == 'bottom' }"
class="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
class="absolute w-full py-1 mt-1 overflow-auto text-sm bg-white rounded-md shadow-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none"
x-cloak>
<template x-for="item in selectableItems" :key="item.value">
<li
@click="selectedItem=item; selectableItemsOpen=false; $refs.selectButton.focus();"
@click="selectedItem=item; selectOpen=false; $refs.selectButton.focus();"
:id="item.value + '-' + selectId"
:disabled="item.disabled"
:data-disabled="item.disabled"
:class="{ 'bg-neutral-100 text-gray-900' : selectableItemIsActive(item), '' : !selectableItemIsActive(item) }"
@mousemove="selectableItemActive=item"
class="relative flex items-center h-full py-2 pl-8 text-gray-700 cursor-default select-none">
class="relative flex items-center h-full py-2 pl-8 text-gray-700 cursor-default select-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<svg x-show="selectedItem.value==item.value" class="absolute left-0 w-4 h-4 ml-2 stroke-current text-neutral-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span class="block font-medium truncate" x-text="item.title"></span>
</li>

20
elements/select.json Normal file
View File

@ -0,0 +1,20 @@
{
"data" : {
"selectOpen" : "A boolean value that will determine if the select dropdown is open or not",
"selectedItem" : "The current selected item. This will hold the object of the selected item where you can get the title and value",
"selectableItems": "An array containing an objects of selectable items. Each object should have a title, value, and disabled property",
"selectableItemActive" : "This value contains an active item. An item is considered active when it is hovered or highlighted via the keyboard",
"selectId" : "Each select element in your project will contain a unique ID, this will contain the unique ID",
"selectKeydownValue" : "When the select element is focused and the user enters a key, the closest matching item will be selected",
"selectKeydownTimeout" : "The timeout in milliseconds to clear the keydown value. (example: If a user types 'a', and waits two seconds and types 'b', we should search for an item starting with 'b', instead of 'ab')",
"selectDropdownPosition" : "The positioning of the dropdown. Possible values are 'bottom' or 'top'",
"selectKeydownClearTimeout" : "The timeout interval for the keydown value to be cleared",
"selectableItemIsActive(item)" : "A method that will check if the item passed in is the current active item",
"selectableItemActiveNext()" : "A method that will set the next item as active",
"selectableItemActivePrevious()" : "A method that will set the previous item as active",
"selectScrollToActiveItem()" : "A method that will scroll the active item into view",
"selectKeydown(event)" : "This method will handle the keydown event on the select element",
"selectItemsFindBestMatch()" : "This method will find the best matching item based on the keydown value",
"selectPositionUpdate()" : "This method will calculate the position of the element and determine if selectDropdownPosition should be set to 'bottom or 'top'"
}
}

5
elements/slide-over.json Normal file
View File

@ -0,0 +1,5 @@
{
"data" : {
"slideOverOpen" : "A boolean value that will open or close the slide-over"
}
}

5
elements/switch.json Normal file
View File

@ -0,0 +1,5 @@
{
"data" : {
"switchOn" : "A boolean value that will toggle the switch on or off (active or inactive)"
}
}

64
elements/tabs-examples/example-01.html
View File

@ -1,61 +1,41 @@
<div
x-data="{
tabSelected: 1,
tabId: $id('tabs'),
tabButtonClicked(tabButton){
this.tabSelected = tabButton.id.replace('tab-button-example-', '');
this.tabSelected = tabButton.id.replace(this.tabId + '-', '');
this.tabRepositionMarker(tabButton);
},
tabButtonActive(tabButton){
return this.tabSelected == tabButton.id.replace('tab-button-example-', '');
tabRepositionMarker(tabButton){
this.$refs.tabMarker.style.width=tabButton.offsetWidth + 'px';
this.$refs.tabMarker.style.height=tabButton.offsetHeight + 'px';
this.$refs.tabMarker.style.left=tabButton.offsetLeft + 'px';
},
tabContentActive(tabContent){
return this.tabSelected == tabContent.id.replace('tab-content-example-', '');
},
tabRepositionMarker(el){
this.$refs.tabMarker.style.width=el.offsetWidth + 'px';
this.$refs.tabMarker.style.height=el.offsetHeight + 'px';
this.$refs.tabMarker.style.left=el.offsetLeft + 'px';
},
return this.tabSelected == tabContent.id.replace(this.tabId + '-content-', '');
}
}"
x-init="tabRepositionMarker($refs.tabButtons.firstElementChild);" class="relative w-full max-w-sm">
<div x-ref="tabButtons" class="relative inline-grid items-center justify-center w-full h-10 grid-cols-2 p-1 text-gray-500 bg-white border border-gray-100 rounded-lg select-none">
<button :id="$id('tab-button-example')" type="button" @click="tabButtonClicked($el);" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Account</button>
<button :id="$id('tab-button-example')" type="button" @click="tabButtonClicked($el);" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Password</button>
<div x-ref="tabButtons" class="relative inline-grid items-center justify-center w-full h-10 grid-cols-3 p-1 text-gray-500 bg-white border border-gray-100 rounded-lg select-none">
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab1</button>
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab2</button>
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab3</button>
<div x-ref="tabMarker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out" x-cloak><div class="w-full h-full bg-gray-100 rounded-md shadow-sm"></div></div>
</div>
<div class="relative w-full mt-2 content">
<div :id="$id('tab-content-example')" x-show="tabContentActive($el)" class="relative">
<!-- Tab Content 1 - Replace with your content -->
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">Account</h3>
<p class="text-sm text-neutral-500">Make changes to your account here. Click save when you're done.</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name-example">Name</label><input type="text" placeholder="Name" id="name-example" value="Adam Wathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username-example">Username</label><input type="text" placeholder="Username" id="username-example" value="@adamwathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
</div>
<div class="flex items-center p-6 pt-0"><button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm 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">Save changes</button></div>
</div>
<!-- End Tab Content 1 -->
<div class="relative flex items-center justify-center w-full p-5 mt-2 text-xs text-gray-400 border rounded-md content border-gray-200/70">
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative">
This is the content shown for Tab1
</div>
<div :id="$id('tab-content-example')" x-show="tabContentActive($el)" class="relative" x-cloak>
<!-- Tab Content 2 - Replace with your content -->
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
<div class="flex flex-col space-y-1.5 p-6">
<h3 class="text-lg font-semibold leading-none tracking-tight">Password</h3>
<p class="text-sm text-neutral-500">Change your password here. After saving, you'll be logged out.</p>
</div>
<div class="p-6 pt-0 space-y-2">
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="password_example">Current Password</label><input type="password" placeholder="Current Password" id="password_example" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="password_new_example">New Password</label><input type="password" placeholder="New Password" id="password_new_example" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
</div>
<div class="flex items-center p-6 pt-0"><button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm 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">Save password</button></div>
</div>
<!-- End Tab Content 2 -->
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
And, this is the content for Tab2
</div>
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
Finally, this is the content for Tab3
</div>
</div>

26
elements/tabs.html
View File

@ -1,32 +1,30 @@
<div
x-data="{
tabSelected: 1,
tabId: $id('tabs'),
tabButtonClicked(tabButton){
this.tabSelected = tabButton.id.replace('tab-button-', '');
this.tabSelected = tabButton.id.replace(this.tabId + '-', '');
this.tabRepositionMarker(tabButton);
},
tabButtonActive(tabButton){
return this.tabSelected == tabButton.id.replace('tab-button-', '');
tabRepositionMarker(tabButton){
this.$refs.tabMarker.style.width=tabButton.offsetWidth + 'px';
this.$refs.tabMarker.style.height=tabButton.offsetHeight + 'px';
this.$refs.tabMarker.style.left=tabButton.offsetLeft + 'px';
},
tabContentActive(tabContent){
return this.tabSelected == tabContent.id.replace('tab-content-', '');
},
tabRepositionMarker(el){
this.$refs.tabMarker.style.width=el.offsetWidth + 'px';
this.$refs.tabMarker.style.height=el.offsetHeight + 'px';
this.$refs.tabMarker.style.left=el.offsetLeft + 'px';
},
return this.tabSelected == tabContent.id.replace(this.tabId + '-content-', '');
}
}"
x-init="tabRepositionMarker($refs.tabButtons.firstElementChild);" class="relative w-full max-w-sm">
<div x-ref="tabButtons" class="relative inline-grid items-center justify-center w-full h-10 grid-cols-2 p-1 text-gray-500 bg-gray-100 rounded-lg select-none">
<button :id="$id('tab-button')" type="button" @click="tabButtonClicked($el); " class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Account</button>
<button :id="$id('tab-button')" type="button" @click="tabButtonClicked($el);" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Password</button>
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Account</button>
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Password</button>
<div x-ref="tabMarker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out" x-cloak><div class="w-full h-full bg-white rounded-md shadow-sm"></div></div>
</div>
<div class="relative w-full mt-2 content">
<div :id="$id('tab-content')" x-show="tabContentActive($el)" class="relative">
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative">
<!-- Tab Content 1 - Replace with your content -->
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
<div class="flex flex-col space-y-1.5 p-6">
@ -42,7 +40,7 @@
<!-- End Tab Content 1 -->
</div>
<div :id="$id('tab-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
<!-- Tab Content 2 - Replace with your content -->
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
<div class="flex flex-col space-y-1.5 p-6">

16
elements/tabs.json Normal file
View File

@ -0,0 +1,16 @@
{
"data" : {
"tabSelected" : "The index value of the currently selected tab. (starts at 1, not 0)",
"tabId": "This is a unique ID that will be applied to the tab element. You can keep this as is or change it to something more meaningful.",
"tabButtonClicked(tabButton)" : "A method that will be called when a tab button is clicked. The tab button element will be passed as a parameter.",
"tabRepositionMarker(tabButton)" : "This method will reposition the tab marker.",
"tabContentActive(tabContent)" : "This method will return true or false if the tab content is active. The tab content element should be passed as a parameter."
},
"alert_notification" : {
"title" : "Adding your own tabs and content",
"description" : "To add your own buttons, you will need to add a button inside the <strong>x-ref=\"tabButtons\"</strong> element. More info below on how to implement new buttons and content."
},
"additional" : {
"description" : "<p>Each tab button needs to contain the following attributes <strong>:id=\"$id(tabId)\" @click=\"tabButtonClicked($el)\"</strong>. Each button will sequentially show or hide any content element with the following attributes <strong>:id=\"$id(tabId + '-content')\" x-show=\"tabContentActive($el)\"</strong>. See example one below for a simple demo of this functionality.</p>"
}
}

9
elements/text-animation.html
View File

@ -2,6 +2,10 @@
startingAnimation: { opacity: 0, scale: 4 },
endingAnimation: { opacity: 1, scale: 1, stagger: 0.07, duration: 1, ease: 'expo.out' },
addCNDScript: true,
animateText() {
$el.classList.remove('invisible');
gsap.fromTo($el.children, this.startingAnimation, this.endingAnimation);
},
splitCharactersIntoSpans(element) {
text = element.innerHTML;
modifiedHTML = [];
@ -12,15 +16,10 @@
}
element.innerHTML = modifiedHTML.join('');
},
addScriptToHead(url) {
script = document.createElement('script');
script.src = url;
document.head.appendChild(script);
},
animateText() {
$el.classList.remove('invisible');
gsap.fromTo($el.children, this.startingAnimation, this.endingAnimation);
}
}"
x-init="

17
elements/text-animation.json Normal file
View File

@ -0,0 +1,17 @@
{
"data" : {
"startingAnimation" : "An object containing the starting position of each character in the text. Text will be animated from this position to the ending position.",
"endingAnimation" : "An object containing the ending position of each character in the text.",
"addCNDScript" : "A boolean value, if set to true it will append the GSAP library to the page if it is not already loaded.",
"animateText()" : "This method will play the text animation.",
"splitCharactersIntoSpans(element)" : "This method will split all the characters into individual spans, allowing each character to be animated individually.",
"addScriptToHead(url)" : "This method will append the GSAP library to the head of the page."
},
"alert_notification" : {
"title" : "GSAP Library",
"description" : "This element makes use of the GSAP plugin. It will automatically be added if <strong>addCNDScript</strong> is set to true. If GSAP is already loaded on your page, you can set <strong>addCNDScript</strong> to false and the library will not be added to your page."
},
"additional" : {
"description" : "<p>Learn more about the <strong>startingAnimation</strong> and <strong>endingAnimation</strong> objects by referring to the <a href=\"https://greensock.com/docs/v3/GSAP/gsap.fromTo()\" target=\"_blank\" class=\"underline\">gsap.fromTo() documentation</a>.</p>"
}
}

5
elements/textarea-auto-resize.json Normal file
View File

@ -0,0 +1,5 @@
{
"data" : {
"resize()" : "This is the method that will resize the textarea. It is called on initiliazation and every time the content in the textarea is updated."
}
}